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>
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.

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.