JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      zoomEnabled: true,
      zoomType: "xy",
      rangeChanged: updateStripLines,
      title:{
        text: "Enable Zooming on X & Y Axis"
      },
      legend: {
        horizontalAlign: "right",
        verticalAlign: "center"
      },
      axisY:{
        includeZero: false,
        stripLines: [{
        color: "#000",
        labelPlacement: "outside",
        labelBackgroundColor: "transparent",
        labelFontColor: "#000"
        }]
      },
      data: data,  // random generator below

   });

    chart.render();
    
    function updateStripLines(e) {
    	if(e.trigger != "reset") {
      	e.chart.axisY[0].stripLines[0].set("value", e.axisY[0].viewportMaximum, false);
        e.chart.axisY[0].stripLines[0].set("label", CanvasJS.formatNumber(e.axisY[0].viewportMaximum, e.chart.axisY[0].valueFormatString));
      } else {
      	e.chart.axisY[0].stripLines[0].set("value", null, false);
        e.chart.axisY[0].stripLines[0].set("label", null);
      }
    }
  }

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

    var y = 0;
    var data = []; var dataSeries = { type: "line" };
    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);