JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/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,

      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);
    }

  });