JSFiddle - React, Tailwind, and code Playground

HTML

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

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

JavaScript

window.onload = function() {
  var dataPoints = [];
  var updateViewport = true, margin = 10;

  // Initial Values
  var xValue = 0;
  var yValue = 10;
  var newDataCount = 100;


  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Dynamic Data"
    },
    zoomEnabled: true,
    rangeChanged: function(e) {

      if(e.trigger == "reset") {
        chart.axisX[0].set("viewportMaximum", null);
        updateViewport = true;
        return;
      } 

      if(e.trigger == "zoom") {	
        setviewportRange(e.chart);
      }
      updateViewport = false;
    },
    data: [{
      type: "line",
      dataPoints: dataPoints
    }]
  });
  updateData();

  function addData(data) {
    if(newDataCount != 1) {
      $.each(data, function(key, value) {
        dataPoints.push({x: value[0], y: parseInt(value[1])});
        xValue++;
        yValue = parseInt(value[1]);
      });
    } else {
      //dataPoints.shift();
      dataPoints.push({x: data[0][0], y: parseInt(data[0][1])});
      xValue++;
      yValue = parseInt(data[0][1]);
    }

    newDataCount = 1;
    chart.axisX[0] && updateViewport && chart.axisX[0].set("viewportMaximum", null, false);
    chart.render();
    updateViewport && setviewportRange(chart);
    setTimeout(updateData, 1000);
  }

  function updateData() {
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="+xValue+"&ystart="+yValue+"&length="+newDataCount+"type=json", addData);
  }

  function setviewportRange(chart) {
    var currentViewportMaximum = chart.axisX[0].get("viewportMaximum");
    var viewportMaximumPixelValue = chart.axisX[0].convertValueToPixel(currentViewportMaximum);
    var extraValue = currentViewportMaximum - Math.round(chart.axisX[0].convertPixelToValue(viewportMaximumPixelValue - margin));

    chart.axisX[0].set("viewportMaximum", currentViewportMaximum + extraValue);
  }


}