JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var extremeRangeThreshold = 30;
var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "xy",
  rangeChanged: rangeChangedHandler,
  title:{
    text: "Zoom Example"              
  },
  data: [              
    {
      type: "line",
      markerSize: 0,
      lineThickness: 2,
      dataPoints: []
    },
    {
      type: "line",
      markerSize: 0,
      lineThickness: 4,
      lineColor: "red",
      dataPoints: []
    }],
  axisX:{},
  axisY:{}
});

function rangeChangedHandler(e) {
  if(e.trigger === "reset") {
    chart.options.axisX.viewportMinimum = null;
    chart.options.axisX.viewportMaximum = null;
    chart.options.axisY.viewportMinimum = null;
    chart.options.axisY.viewportMaximum = null;
    chart.render();
    return;
  }

  if(e.trigger === "zoom"){
    if(e.chart.axisX[0].maximum - e.chart.axisX[0].viewportMaximum <= extremeRangeThreshold){
      chart.options.axisX.viewportMaximum = null;
      chart.render();
      chart.options.axisX.viewportMaximum = e.chart.axisX[0].maximum; 
    }

    if(e.chart.axisX[0].viewportMinimum - e.chart.axisX[0].minimum <= extremeRangeThreshold){
      chart.options.axisX.viewportMinimum = null;
      chart.render();
      chart.options.axisX.viewportMinimum = e.chart.axisX[0].minimum;  
    }

    if(e.chart.axisY[0].maximum - e.chart.axisY[0].viewportMaximum <= extremeRangeThreshold){
      chart.options.axisY.viewportMaximum = null;
      chart.render();
      chart.options.axisY.viewportMaximum = e.chart.axisY[0].maximum;
    }

    if(e.chart.axisY[0].viewportMinimum - e.chart.axisY[0].minimum <= extremeRangeThreshold){
      chart.options.axisY.viewportMaximum = null;
      chart.render();
      chart.options.axisY.viewportMinimum = e.chart.axisY[0].minimum;   
    }
    chart.render();
  }
}

var limit = 1000;
var y = 0;
var allXCoords = [];
var allYCoords = [];
for (var i = 0; i < limit; i += 1) {
  y += (Math.random() * 10 - 5);
  allXCoords.push(i-limit/2);
 ...