JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<canvas id="myChart" height="450" width="600"></canvas>
JavaScript
function getActualData() {
var actualData = []
for (var m = 0; m < 20; m++)
actualData.push(45 + parseInt(Math.random() * 35))
return actualData;
}
var ANIMATIONSTEPS = 200;
var myLineChart;
var labels;
var animationStep;
setInterval(function () {
if (myLineChart === undefined) {
var actualData = getActualData();
// if we have only a few data points interpolate to fill out enough points to make the animation smooth
var interpolationSteps = Math.ceil(ANIMATIONSTEPS / actualData.length);
labels = []
var data = []
var blankData = []
for (var i = 0; i < (actualData.length - 1); i++) {
labels.push('')
data.push(actualData[i])
blankData.push(null)
// push interpolation
var difference = actualData[i + 1] - actualData[i];
var interpolationStep = 1 / interpolationSteps;
for (var j = 1; j < interpolationSteps; j++) {
labels.push('')
data.push(actualData[i] + difference * Chart.helpers.easingEffects["linear"](j * interpolationStep));
blankData.push(null)
}
}
labels.push('')
data.push(actualData[i])
blankData.push(null)
var data = {
labels: labels,
datasets: [
{
strokeColor: "rgba(243, 118, 27, 1)",
data: blankData
},
{
strokeColor: "transparent",
data: data
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
myLineChart = new Chart(ctx).Line(data, {
animation: false,
datasetFill: false,
pointDot: false,
datasetStrokeWidth: 5,
showTooltips: false,
scaleOverride: true,
...