Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty.
var options = {
bezierCurve : false,
onAnimationComplete: done /// calls function done() {} at end
};
Chart.JS API has changed since this was posted and older examples did not seem to be working for me. here is an updated fiddle that works on the newer versions
HTML:
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<img id="url" />
</body>
JS:
function done(){
alert("haha");
var url=myLine.toBase64Image();
document.getElementById("url").src=url;
}
var options = {
bezierCurve : false,
animation: {
onComplete: done
}
};
var myLine = new
Chart(document.getElementById("canvas").getContext("2d"),
{
data:lineChartData,
type:"line",
options:options
}
);
http://jsfiddle.net/KSgV7/585/
First convert your Chart.js canvas to base64 string.
var url_base64 = document.getElementById('myChart').toDataURL('image/png');
Set it as a href attribute for anchor tag.
link.href = url_base64;
<a id='link' download='filename.png'>Save as Image</a>