JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="chartContainer" style="height: 400px; max-width: 920px; margin: 0px auto;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
  </body>
</html>

JavaScript

window.onload = function () {
  var dataPoints = [], currentDate = new Date();
  var dataCount = 700, ystart = 50, interval = 1000, xstart = (currentDate.getTime() - (700 * 1000));
  
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2", 
    title:{
      text:""
    },
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          valueFormatString: "MMM DD, YYYY HH:mm:ss"
        }
      },
      axisY: {
        title: ""
      },
      toolTip: {
        shared: true
      },
      data: [{
        type: "line",
        xValueFormatString: "MMM DD, YYYY HH:mm:ss",
        xValueType: "dateTime",
        dataPoints : dataPoints
      }]
    }],
    navigator: {
      slider: {
        minimum: new Date(currentDate.getTime() - (90 * 1000))
      },
      axisX: {
        labelFontColor: "white"
      }
    },
    rangeSelector: {
      enabled: false
    }
  });
  
  updateChart(xstart, ystart, dataCount, interval);
  function updateChart(xstart, ystart, length, interval) {
    var xVal = xstart, yVal = ystart;
    for(var i = 0; i < length; i++) {
      yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
      yVal = Math.min(Math.max(yVal, 5), 90);
      dataPoints.push({x: xVal,y: yVal});
      xVal += interval;
    }
    stockChart.options.navigator.slider.minimum = new Date(xVal - (90 * 1000)) ;
    xstart = xVal;
    dataCount = 1;
    ystart = yVal;
    stockChart.render();
    setTimeout(function() { updateChart(xstart, ystart, dataCount, interval); }, 1000);
  }
}