Show Chart.js chart as image

I was working on a tool where I needed to show Chart.js chart as image. I’m going to share a snippet to show I achieved it.

Chart.js have an afterRender() callback function which is called after a chart has been completely rendered, including the animation. Because there is no option given in Chart.js to show a chart as an image, I used that callback function to convert the canvas into an image.

Chart.js have an API method – toBase64Image() which returns a chart as a base 64 encoded string. I used this method inside the afterRender() callback function.

Now, First we create a simple canvas.

<canvas id="mychart"></canvas>

Now we apply the javascript.

new Chart("mychart", {
 type: 'bar',
 data: {
  labels: ["06-2020", "07-2020", "08-2020", "09-2020", "10-2020", "11-2020", "12-2020", "01-2021", "02-2021", "03-2021", "04-2021", "05-2021"],
  datasets: [{
   label: '# of Sells',
   data: [12, 19, 30, 17, 12, 26, 20, 13, 15, 16, 20, 10],
   backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)'
   ],
   borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)'
   ],
   borderWidth: 1
  }]
 },

 plugins: [{
  afterRender: function (chart, args, options) {
   var img = new Image();
   img.src = chart.toBase64Image('image/png', 1);
   chart.canvas.parentNode.insertBefore(img, chart.canvas.nextSibling);
   chart.canvas.style.display = 'none'; // Hide the chart canvas
   chart.canvas.remove(); // To remove the chart canvas
  }
 }]
});