JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js" >  </script>
<div id = "chartContainer"/>
</body>

JavaScript

var xAxisStripLinesArray = [];
var yAxisStripLinesArray = [];
var dps = [];
var xlab;
var chart = new CanvasJS.Chart("chartContainer",
                               {

  exportEnabled: true,
  title:{
    text:"ECG Report",
  },

  axisX:{
    stripLines:xAxisStripLinesArray,
    gridThickness: 0.7,
    gridColor:"red",
    tickColor:"transparent",
    interval: 1,
    labelFontColor:"blue",
    //labelFontSize: 10,
    /* labelFormatter: function(e){
      xlab = e.value; //console.log(xlab);
      return  "" + e.value;}  */

  },

  axisY:{
    stripLines:yAxisStripLinesArray,
    gridThickness: 0.5,
    gridColor:"#DC74A5",
    tickColor:"transparent",
    labelFontColor:"transparent",
    minimum: 0,
    maximum: 7,
    interval: 0.2,
    labelFontSize: 10, 
  },
  data: [
    {
      type: "spline",
      color:"black",	
      dataPoints: dps
    }
  ]
});

var xVal = 0; 
var yVal = 0, updateCount = 0;
var xx = 0;
var yy = 0;
var updateInterval = 1000;
var dataLength = 10; // number of dataPoints visible at any point



var updateChart = function (count) {

  count = count || 1;
  // count is number of times loop runs to generate random dataPoints.

  for (var j = 0; j < count; j++) 
  {	
    yVal =  yVal + Math.round(5 + Math.random() *(-5-5));
    xVal = xVal + 1;      	
    //dps.shift();
    dps.push({x: xx++, y: yVal});
    
  }

  yAxisStripLinesArray.push({value:yy,thickness:0.7,color:"red",labelFontColor:"black",label:yy});
  yy = yy+1; 	

  var tt = xlab; 
  if (tt % 1 == 0)	{
    //console.log("XLAB-----"); console.log(xlab);
    var itemp = xlab; //console.log("itemp"); console.log(itemp);		
    for ( j = 0; j < 5; j++)
    {
      console.log("INSIDE FOR");
      xAxisStripLinesArray.push({value:itemp,thickness:0.7, color:"pink"});
      itemp = itemp+0.2; 
    }         

  }   
  //console.log("+++++");


  if (dps.length > dataLength) {
    dps.shift(); 
    //dps.push({y: yVal, x : xVal});

  } 
 ...