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>
    <span id="viewportMinTooltip" class="custom-tooltip"></span>
    <span id="viewportMaxTooltip" class="custom-tooltip"></span>

CSS

.custom-tooltip {
  position: absolute;
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
}

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: true,
    title:{
      text: "Try Zooming And Panning" 
    },
    axisY:{
      includeZero: false
    },
    data: data,  // random generator below

  });

  chart.render();

  //https://stackoverflow.com/a/7700090
  var down = false;
  $(chart.container).mousedown(function(e) {
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;

    if($(".canvasjs-chart-toolbar button[title=Pan]").length > 0) {
      down = true;
      $("#viewportMinTooltip").text(CanvasJS.formatNumber(chart.axisX[0].convertPixelToValue(relX), chart.axisX[0].valueFormatString));
      $("#viewportMinTooltip").css({left: (relX + "px"), top: (chart.axisY[0].bounds.y1 + "px"), "visibility": "visible"});
    }
  }).mouseup(function() {
    down = false;
  });

  $(chart.container).mousemove(function(e) {
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left;
    var relY = e.pageY - parentOffset.top;
    if(down) {
      $("#viewportMaxTooltip").text(CanvasJS.formatNumber(chart.axisX[0].convertPixelToValue(relX), chart.axisX[0].valueFormatString));
      $("#viewportMaxTooltip").css({left: (relX + "px"), top: (chart.axisY[0].bounds.y1 + "px"), "visibility": "visible"});
    }
  });
  $(document).mouseup(function(e) {
    down = false;
    $("#viewportMinTooltip").text("");
    $("#viewportMaxTooltip").text("");
    $(".custom-tooltip").css({"visibility": "hidden"});
  });
}

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);