DEV Community

loading...
Cover image for How to save chart as image Chart.js

How to save chart as image Chart.js

noemelo profile image Noé Melo Locumber ・1 min read

HTML code:

<!-- Chart.js Object -->
<canvas id="lineChart" width="300" height="150"> </canvas>

<!-- Download Button
"download" attribute is very important:
<a download ="nameChart.jpg"></a> 
-->
<a id="download"
        download="ChartImage.jpg" 
        href=""
        class="btn btn-primary float-right bg-flat-color-1"
        title="Descargar Gráfico">

        <!-- Download Icon -->
 <i class="fa fa-download"></i>
 </a>

JavaScript code:

//Download Chart Image
document.getElementById("download").addEventListener('click', function(){
  /*Get image of canvas element*/
  var url_base64jp = document.getElementById("lineChart").toDataURL("image/jpg");
  /*get download button (tag: <a></a>) */
  var a =  document.getElementById("download");
  /*insert chart image url to download button (tag: <a></a>) */
  a.href = url_base64jp;
});

Example of Line Chart:

Alt Text

Full code in GitHub:

Discussion (1)

pic
Editor guide
Collapse
laviku profile image
Lavinia

Great! Thanks for sharing!