Chart.js
Chart.js, starting from version: 2.9.3
Example based on Chart.js | Chart.js
Template:
<canvas id="myChart"></canvas>
Script:
SR.render({}, async () => {
await eval(await fetch('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js').then((res) => res.text()));
const canvas = document.getElementById("myChart");
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
animation: {
onComplete: () =>{
const canvasToBase64 = canvas.toDataURL('image/png');
canvas.setAttribute("data-image", canvasToBase64);
}
}
}
});
});