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:

Posted on by:

noemelo profile

Noé Melo Locumber

@noemelo

I'm passionate about technology, programming, artificial intelligence, machine learning and data science.

Discussion

markdown guide