JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<button onclick="downloadImage();">save as image</button>
<canvas id="ctx"></canvas>
JavaScript
var chart_variable = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'My First Dataset',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
title: {
display: true,
text: 'Chart Title'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});
function downloadImage() {
/* set new title */
chart_variable.options.title.text = 'New Chart Title';
chart_variable.update({
duration: 0
});
// or, use
// chart_variable.update(0);
/* save as image */
var link = document.createElement('a');
link.href = chart_variable.toBase64Image();
link.download = 'myImage.png';
link.click();
/* rollback to old title */
chart_variable.options.title.text = 'Chart Title';
chart_variable.update({
duration: 0
});
// or, use
// chart_variable.update(0);
}