Preview of yValue value in toolTip while zooming - CanvasJS JavaScript Charts

Preview of yValue value in toolTip while zooming - CanvasJS JavaScript Charts

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>
<div><input id="yMinValue" class="textbox allign" type="text" value="0" readonly /></div>
<div><input id="yMaxValue" class="textbox allign" type="text" value="0" readonly /></div>

<div id="chartContainer2" style="height: 360px; width: 100%;"></div>
<div id="chartContainer3" style="height: 360px; width: 100%;"></div>

CSS

.textbox {
  display: none;
}

.allign {
  position: absolute;
  width: 30px;
  height: 20px;
}

JavaScript

var yMinValue = jQuery("#yMinValue");
var yMaxValue = jQuery("#yMaxValue");
var y1, y2; //To assign the yMin and yMax value to calculate the difference
var dps = [];
 
var chart = new CanvasJS.Chart("chartContainer", {
   zoomEnabled: true,
   zoomType: "x",
   title: {
     text: "Preview x-values while zooming"
   },
   subtitles: [{
     text: "Click and drag to see the values"
   }],
   data: [{
     type: "line",
     dataPoints: dps
   }]
 });
 chart.render();
 
 var chart2 = new CanvasJS.Chart("chartContainer2", {
   zoomEnabled: true,
   zoomType: "x",
   title: {
     text: "Preview x-values while zooming"
   },
   subtitles: [{
     text: "Click and drag to see the values"
   }],
   data: [{
     type: "line",
     dataPoints: dps
   }]
 });
 chart2.render();

 var chart3 = new CanvasJS.Chart("chartContainer3", {
   zoomEnabled: true,
   zoomType: "x",
   title: {
     text: "Preview x-values while zooming"
   },
   subtitles: [{
     text: "Click and drag to see the values"
   }],
   data: [{
     type: "pie",
     dataPoints: dps
   }]
 });
 chart3.render();
 
$(".canvasjs-chart-canvas").on("mousemove", function(event)
{
    var parentOffset = $(this).parent().offset();
    var relX = event.pageX - parentOffset.left;
    var xValue = Math.round(chart.axisX[0].convertPixelToValue(relX));
    console.log(xValue);
});



var xVal = 0;
var yVal = 15;

for (var i = 0; i < 1000; i++) {
  yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
  dps.push({
    x: xVal,
    y: yVal
  });
  xVal++;
}
chart.render();
chart2.render();
chart3.render();