1👍
It looks like this link does what you’re looking for, just with canvasjs. I adapted it here for ChartJS:
Here’s the relevant code:
const dataLabels = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July'];
const data = {
labels: dataLabels,
datasets: [{
label: 'Dataset 1',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
},
{
label: 'Dataset 2',
data: [55, 69, 70, 61, 66, 45, 50],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}
]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
},
};
var chart = new Chart(document.getElementById('chartContainer'), config);
document.getElementById("downloadCSV").addEventListener("click", function() {
downloadCSV({
filename: "chart-data.csv",
chart: chart
})
});
function convertChartDataToCSV(args) {
let result, columnDelimiter, lineDelimiter, labels, data;
data = args.data.data || null;
if (data == null || !data.length) {
return null;
}
labels = args.labels || null;
if (labels == null || !labels.length) {
return null;
}
columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n';
result = '' + columnDelimiter;
result += labels.join(columnDelimiter);
result += lineDelimiter;
result += args.data.label.toString();
for (let i = 0; i < data.length; i++) {
result += columnDelimiter;
result += data[i];
}
result += lineDelimiter;
return result;
}
function downloadCSV(args) {
var data, filename, link;
var csv = "";
for (var i = 0; i < chart.data.datasets.length; i++) {
csv += convertChartDataToCSV({
data: chart.data.datasets[i],
labels: dataLabels
});
}
if (csv == null) return;
console.log(csv);
filename = args.filename || 'chart-data.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
// not sure if anything below this comment works
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link); // Required for FF
link.click();
document.body.removeChild(link);
}
<script src=" https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js "></script>
<canvas id="chartContainer" style="height: 360px; width: 100%;"></canvas>
<button id="downloadCSV">Download Chart Data as CSV</button>
Source:stackexchange.com