Save chart as image with Chart.js

Chart.js is a 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 web browser’s canvas saving feature

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

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

Use JavaScript

You can use a JavaScript to control which element can be used to trigger saving chart as 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;
});

Leave a Comment

Your email address will not be published. Required fields are marked *