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

var chart = new CanvasJS.Chart("chartContainer",{
  zoomEnabled: true,
  zoomType: "y",
  title: {
    text: "Custom valueFormatString depending on zoom level"
  },
  subtitles: [{
    text: "Zoom vertically / Over y-axis"
  }],
  axisY:{
    valueFormatString: "###0"
  },
  rangeChanged: customAxisLabel,
  data: [{ 
    type: "line" ,
    dataPoints : [
      { y: 110 },
      { y: 120 },
      { y: 125 },
      { y: 128 },
      { y: 160 },
      { y: 220 },
      { y: 220 },
      { y: 220 },
      { y: 220 },
      { y: 253 },
      { y: 304 },
      { y: 403 },
      { y: 304 },
      { y: 406 },
      { y: 404 },
      { y: 510 },
      { y: 420 },
      { y: 303 },
      { y: 302 },
      { y: 821 },
      { y: 804 },
      { y: 906 },
      { y: 830 },
      { y: 930 },
      { y: 630 },
      { y: 990 },
      { y: 420 },
      { y: 820 },
      { y: 904 },
      { y: 920 },
      { y: 702 },
      { y: 904 },
      { y: 903 },
      { y: 1012 },
      { y: 402 },
      { y: 1020 },
      { y: 1010 },
      { y: 1040 },
      { y: 940 },
      { y: 940 },
      { y: 900 },
      { y: 1060 },
      { y: 1040 },
      { y: 1240 },
      { y: 1340 },
      { y: 1040 },
      { y: 1060 },
      { y: 1100 },
      { y: 1200 },
      { y: 1300 },
      { y: 1040 },
      { y: 1340 }
    ]
  }]
});
chart.render();

function customAxisLabel(e) {

  var viewportRange = e.chart.axisY[0].viewportMaximum - e.chart.axisY[0].viewportMinimum;

  if(!e.chart.options.axisY)
    e.chart.options.axisY = {};

  if(e.trigger === "reset") {
    e.chart.options.axisY.interval  = null;
    e.chart.options.axisY.valueFormatString = "####0"
  }
  else {
    if(viewportRange > 1000) {
      e.chart.options.axisY.valueFormatString = "###0";
    }
    else if(viewportRange <= 1000 && viewportRange > 100) {
      e.chart.options.axisY.valueFormatString = "###0.00";
    }
    else {
      e.chart.options.axisY.valueFormatString = "###0.0000";
    }        	
  }

  chart.render();

}