JSFiddle - React, Tailwind, and code Playground

by canvasjs

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: 30,
        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 second = 1000; // 1 second = 1000 ms
        var minute = 1000 * 60; //1 minute = 1000*60 ms
        var hour = 1000 * 60 * 60; //1 hour = 1000 * 60 * 60 ms        
        if(e.trigger === "reset") {
        		e.chart.options.axisX.intervalType = null;
            e.chart.options.axisX.interval = null;
        }
        else if(e.trigger === "zoom") {
          //30 Seconds
          if((((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(second))<20)) {          
            e.chart.options.axisX.intervalType = "second";
            e.chart.options.axisX.interval = 1;
          }
          //Minutes
          else if(((e.axisX[0].viewportMaximum -  e.axisX[0].viewportMinimum)/(minute))<20) {
            e.chart.options.axisX.intervalType = "minute";
            e.chart.options.axisX.interval = 1;
       ...