JSFiddle - React, Tailwind, and code Playground

showAtX() - Displays ToolTip at the given X Value - 0 | JSFiddle Sample Code

HTML

<div id="chartContainer" style="height: 275px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart('chartContainer', {
    title: {
      text: 'Display ToolTip on Hover',
    },
    data: [
      {
        type: 'line',
        dataPoints: [
          { x: 10, y: 71 },
          { x: 20, y: 55 },
          { x: 30, y: 50 },
          { x: 40, y: 65 },
          { x: 50, y: 95 },
          { x: 60, y: 68 },
          { x: 70, y: 28 },
          { x: 80, y: 34 },
          { x: 90, y: 14 },
        ],
      },
      {
        type: 'line',

        dataPoints: [
          { x: 10, y: 71 },
          { x: 20, y: 55 },
          { x: 30, y: 50 },
          { x: 40, y: 65 },
          { x: 50, y: 95 },
          { x: 60, y: 68 },
          { x: 70, y: 28 },
          { x: 80, y: 34 },
          { x: 90, y: 14 },
        ],
      },
    ],
  });
  chart.render();

  var container = chart.container.querySelector('.canvasjs-chart-container');
  container.addEventListener('mousemove', function (e) {
    var rect = container.getBoundingClientRect();
    var mouseX = e.clientX - rect.left;
    var xValue = chart.axisX[0].convertPixelToValue(mouseX);

    var dataPoints = chart.data[0].dataPoints;
    var nearest = dataPoints.reduce((prev, curr) =>
      Math.abs(curr.x - xValue) < Math.abs(prev.x - xValue) ? curr : prev,
    );

    chart.toolTip.showAtX(nearest.x);
  });

  container.addEventListener('mouseleave', function () {
    chart.toolTip.hide();
  });
};