JSFiddle - React, Tailwind, and code Playground

HTML

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

    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  <div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/" target="_blank" title="Zooming &amp; Panning Tutorial in Chart ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/</a></div>

JavaScript

window.onload = function () {

  var viewportMinimum, viewportMaximum;
  var chart = new CanvasJS.Chart("chartContainer",
                                 {
    zoomEnabled: true, 
    title:{
      text: "Try Zooming And Panning" 
    },
    axisY:{
      includeZero: false
    },
    rangeChanging: function(e) {
      if(e.trigger == "reset") {
        e.chart.options.axisX.viewportMinimum = null;
        e.chart.options.axisX.viewportMaximum = null;
      }
    },
    axisX: {},
    legend: {
      cursor: "pointer",
      itemclick: function (e) {
        //console.log("legend click: " + e.dataPointIndex);
        //console.log(e);
        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
          
          //hiding axisLabels if chart is not visible
          viewportMinimum = e.chart.axisX[0].viewportMinimum;
          viewportMaximum = e.chart.axisX[0].viewportMaximum;
          e.chart.options.axisX.viewportMinimum = null;
          e.chart.options.axisX.viewportMaximum = null;
          
        } else {
          e.dataSeries.visible = true;
          
          //resetting viewportMinimum and viewportMaximum to last zoomed region
          e.chart.options.axisX.viewportMinimum = viewportMinimum;
          e.chart.options.axisX.viewportMaximum = viewportMaximum;
        }

        e.chart.render();
      }
    },
    data: data,  // random generator below

  });

  chart.render();
}

var limit = 1000;    //increase number of dataPoints by increasing this

var y = 0;
var data = []; var dataSeries = { type: "line", showInLegend: true, 
                                 name: 'Normal fft' };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  y += (Math.random() * 10 - 5);
  dataPoints.push({
    x: i - limit / 2,
    y: y                
  });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);