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:
Top comments (1)
Great! Thanks for sharing!