JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Live Updating Chart.js</h1>
<canvas id="myChart" width="800" height="700"></canvas>
CSS
canvas {
background-color: #22293d
}
JavaScript
$(document).ready(function() {
var count = 10;
var data = {
labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
datasets: [{
fillColor: '#8bd600',
// fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
//pointStrokeColor : "#fff",
data: [0]
}, {
fillColor: '#8bd600',
pointBackgroundColor: '#8bd600',
borderWidth: 1,
borderColor: '#ffffff',
data: [28, 48, 40, 19, 96, 87, 66, 97, 92, 85]
}]
}
// this is ugly, don't judge me
var updateData = function(oldData) {
var labels = oldData["labels"];
var dataSetA = oldData["datasets"][0]["data"];
var dataSetB = oldData["datasets"][1]["data"];
labels.shift();
count++;
labels.push(count.toString());
var newDataA = dataSetA[9] + (20 - Math.floor(Math.random() * (41)));
var newDataB = dataSetB[9] + (20 - Math.floor(Math.random() * (41)));
dataSetA.push(newDataA);
dataSetB.push(newDataB);
dataSetA.shift();
dataSetB.shift();
};
var optionsAnimation = {
//Boolean - If we want to override with a hard coded scale
scaleOverride: false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 20,
//Number - The value jump in the hard coded scale
scaleStepWidth: 10,
//Number - The scale starting value
scaleStartValue: 0,
datasetFill: false
}
// Not sure why the scaleOverride isn't working...
var optionsNoAnimation = {
animation: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 1,
//Number - The value jump in the hard coded scale
scaleStepWidth: 1,
...