JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

	<div id="chartContainer" style="height: 300px; width: 100%;">
	</div>

JavaScript

window.onload = function () {

  var dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}];   //dataPoints. 

  var chart = new CanvasJS.Chart("chartContainer",{
    title :{
      text: "Live Data"
    },
    axisX: {						
      title: "Axis X Title"
    },
    axisY: {						
      title: "Units",
      viewportMinimum: 0,
      viewportMaximum: 99
    },
    data: [{
      type: "line",
      dataPoints : dps
    }]
  });

  chart.render();
  var xVal = dps.length + 1;
  var yVal = 15;	
  var updateInterval = 1000;

  var updateChart = function () {


    yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
    dps.push({x: xVal,y: yVal});

    xVal++;
    if (dps.length >  10 )
    {
      dps.shift();				
    }

    chart.render();		

    // update chart after specified time. 

  };

  setInterval(function(){updateChart()}, updateInterval); 
}