JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

window.onload = function () {

  var dataPoints = [];
  var stripLineArray = []

  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    axisX:{
      valueFormatString: "hh:mm",
      stripLines: stripLineArray
    },
    data: [{ 
      type: "line",
      xValueType: "dateTime",
      dataPoints: dataPoints
    },
    ]
  });
  
  var updateInterval = 1000;
  var yValue = 600; 
	var stripLineCounter = 0;
  var time = new Date();
	
  function updateChart() {
    var deltaY ;
    time.setTime(time.getTime()+60*updateInterval);
    deltaY = 0.5 + Math.random() *(-0.5-0.5);
    yValue = Math.round((yValue + deltaY)*100)/100;
    dataPoints.push({
      x: time.getTime(),
      y: yValue
    });
      
    if(stripLineCounter%5 == 0) {
    	stripLineArray.push({value:time.getTime(), label: CanvasJS.formatDate(time.getTime(), "hh:mm")});
    }
    stripLineCounter++;
    
    if (dataPoints.length >  100 ) {
      dataPoints.shift();				
    }
    chart.render();
    setTimeout(updateChart, updateInterval);
  }
  updateChart();
}