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;
});

Leave a Comment

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


Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close