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>
<div id="displayPixel"></div>

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.imageToolTip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.imageToolTip:hover .tooltiptext {
  visibility: visible;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
    {
      type: "line",      
      dataPoints: [
        { x: 10, y: 5 }, 
        { x: 20, y: 9 }, 
        { x: 30, y: 17}, 
        { x: 40, y: 32}, 
        { x: 50, y: 22}, 
        { x: 60, y: 14}, 
        { x: 70, y: 25}, 
        { x: 80, y: 18}, 
        { x: 90, y: 20}
      ]
    }
  ]        
});
chart.render();

document.getElementById("chartContainer").addEventListener("click", function(e){
  var xPos = e.pageX - this.offsetLeft, 
      yPos = e.pageY - this.offsetTop; 
  document.getElementById("displayPixel").innerHTML =  "Pixels Coordinates: { " + xPos + ", " + yPos + "} <br/>" + "Value on Axis Scale: { " + Math.round(chart.axisX[0].convertPixelToValue(xPos)) + ", " + Math.round(chart.axisY[0].convertPixelToValue(yPos)) + "}";

});