Save a Chart as an Image with Chart.js

Chart.js is a simple yet flexible JavaScript chart library for both designers & developers. If you want to download a chart as an image file, you can follow one of these 2 methods.

Use the web browser’s canvas-saving feature

Chartjs renders the chart in a canvas tag so the displaying chart is acknowledged as an image by the web browser.

You can simply download the chart by right-clicking on it and choosing Save Image As.

Use JavaScript

You can use JavaScript to control which element can be used to trigger the feature of saving a chart as an image. It is more user-friendly.

<div style="width: 400px;"> 
	<canvas id="myChart" width="400" height="400"></canvas>
	<p><a id="btnDownload" download="chart.png" href="">Download</a></p>
</div>

document.getElementById("btnDownload").addEventListener('click', function(){  
  var base64_url = document.getElementById("myChart").toDataURL("image/png");    
  this.href = base64_url;
});