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

$(document).ready(function() {
    var dataPoints = [{
      'x': 1520500115000,
      'y': 19
    }];
    var chart;

    var json = {
      x: 1520500115000,
      y: 19
    };

    chart = new CanvasJS.Chart("chartContainer", {
      zoomEnabled: true,
      panEnabled: true,
      rangeChanging: intervalTypeChanger,

      title: {
        text: "Live Chart with dataPoints from External JSON"
      },
      axisX: {
        intervalType: "second",
        //interval: 1,
        valueFormatString: "HH:mm:ss",
        labelAngle: -20
      },
      data: [{
        type: "line",
        xValueType: "dateTime",
        xValueFormatString: "hh:mm:ss",
        dataPoints: dataPoints,
      }]
    });
    chart.render();
    updateChart();

    function updateChart() {
      var x = parseInt(json.x) + parseInt(1000);
      json = {
        x: x,
        y: 19
      };

      var data = {
        x: x,
        y: 19
      };

      dataPoints.push({
        x: data.x,
        y: parseInt(data.y)
      });

      chart.render();

      setTimeout(function() {
        updateChart()
      }, 1000);
    }
    
    function intervalTypeChanger(e) {
				var hours=1000*60*60;
        if(e.trigger === "reset") {
        		intervalType = null;
        }
        else if(e.trigger === "zoom") {
          //Hour (Comparing Hours)
          if((((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours))<24)) {
            intervalType = "hour";
          }
          //Day (Comparing Days)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24))<7) {
            intervalType = "day";
          }         
          //Month (Comparing Months)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30))<30) {
            intervalType = "month";
          }
          //Year (Comparing Years)
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(hours*24*30*30))<12) {
           ...