How to save chart as image Chart.js

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:

Full code in GitHub:

• https://github.com/NoeMelo/Chart.js

Comments

[Lavinia]

Great! Thanks for sharing!