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/canvasjs.stock.min.js"></script>

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

JavaScript

var limit = 10000;    //increase number of dataPoints by increasing this
var y = 1000;
var data = []; var dataSeries = { type: "spline" };
var dataPoints = [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
  title:{
    text:"StockChart Zoom using Mouse Wheel"
  },
  animationEnabled: true,
  exportEnabled: true,
  charts: [{
    axisX: {
      crosshair: {
        enabled: true,
        snapToDataPoint: true
      }
    },
    axisY: {
      crosshair: {
        enabled: true
      }
    },
    data: data
  }],    
  rangeSelector: {
    inputFields: {
      startValue: 4000,
      endValue: 6000,
      valueFormatString: "###0"
    },

    buttons: [{
      label: "1000",
      range: 1000,
      rangeType: "number"
    },{
      label: "2000",
      range: 2000,
      rangeType: "number"
    },{
      label: "5000",
      range: 5000,
      rangeType: "number"
    },{
      label: "All",        
      rangeType: "all"
    }]
  }
});

for (var i = 0; i < limit; i += 1) {
  y += Math.round((Math.random() * 10 - 5));
  dataPoints.push({ x: i, y: y });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
stockChart.render();
addWheelZoom(stockChart);

function addWheelZoom(stockChart) {
  stockChart.charts[0].container.addEventListener("wheel", function(e){
    e.preventDefault();

    var slider = stockChart.navigator.slider;
    var sliderMinimum = slider.get("minimum"),
        sliderMaximum = slider.get("maximum");
    
    var interval = (slider.get("maximum") - slider.get("minimum"))/50; // change interval based on the range of chart
    var newMin, newMax;

    if (e.deltaY < 0) {
      newMin = sliderMinimum + interval;
      newMax = sliderMaximum - interval;
    }
    else if (e.deltaY > 0) {
      newMin = sliderMinimum - interval;
      newMax = sliderMaximum + interval;
    }

    if(newMax < stockChart.navigator.axisX[0].get("maximum") || newMin > stockChart.navigator.axisX[0].get("minimum")) { 
     ...