JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;">
</div>
JavaScript
window.onload = function () {
var dps = [];
var chart = new CanvasJS.Chart("chartContainer",{
title :{
text: "Live Data"
},
axisX: {
labelAutoFit: false,
title: "Axis X Title"
},
axisY: {
labelAutoFit: false,
title: "Units",
},
data: [{
type: "line",
dataPoints : dps
}]
});
var xVal = 0;
var yVal = 0;
var updateInterval = 300;
var updateChart = function () {
yVal = xVal**2;
dps.push({x: xVal,y: yVal});
xVal++;
chart.render();
chart.axisY[0].set("maximum", yVal+1);
};
setInterval(function(){updateChart()}, updateInterval);
}