How to copy and paste a chart using base64 encoding?

Description

This article explains how to copy and paste a chart by converting it into a base64-encoded image.

Solution

You can copy a chart by converting its SVG element into a base64-encoded image. This method involves rendering the chart as an image using a canvas, which can then be reused in other files or applications.

Code Snippet

document.getElementById('btn').onclick = function () {
       var svg = document.querySelector("#container_svg");
       var svgData = new XMLSerializer().serializeToString(svg);
       var canvas = document.createElement("canvas");
       document.body.appendChild(canvas);
       var svgSize = svg.getBoundingClientRect();
       canvas.width = svgSize.width;
       canvas.height = svgSize.height;
       var ctx = canvas.getContext("2d");
       var img = document.createElement("img");
       img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
       img.onload = function () {
           ctx.drawImage(img, 0, 0);
           var imagedata = canvas.toDataURL("image/png");
           console.log(imagedata);
           canvas.remove();
       };
   };

The following image illustrates the output of the above code.

View Sample in Stackblitz