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  style="height: 360px; width: 45%; display: inline-block;">
  DIV LIKE MY LAYOUT
</div>-->
<div id="chartContainer" style="height: 300px; width: 45%; display: inline-block;"></div>
<div id="chartContainer1" style="height: 300px; width: 100%; display: inline-block;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    title: "Latitude"
  },
  axisY: {
    title: "Longitude"
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 10, y: 10 },
        { x: 20, y: 30 },
        { x: 30, y: 30 },
        { x: 30, y: 25 },
        { x: 45, y: 20 },
        { x: 40, y: 60 },
        { x: 45, y: 60 },
        { x: 55, y: 15 },
        { x: 10, y: 10 }
      ]
    }					
  ]
});
var chart1 = new CanvasJS.Chart("chartContainer1", {
  data: [
    {
      type: "line",
      mousemove: showTooltip,
      mouseover: showTooltip,
      dataPoints: [
        { x: 1100, y: 12, z: {latitude: 30, logitude: 30}},
        { x: 1200, y: 150, z: {latitude: 30, logitude: 25}},
        { x: 1300, y: 77, z: {latitude: 40, logitude: 60}},
        { x: 1400, y: 33, z: {latitude: 55, logitude: 15}},
        { x: 1500, y: 55, z: {latitude: 10, logitude: 10}},
        { x: 1600, y: 88, z: {latitude: 45, logitude: 20}},
        { x: 1700, y: 99, z: {latitude: 20, logitude: 30}},
        { x: 1800, y: 14, z: {latitude: 45, logitude: 60}},
        { x: 1900, y: 13, z: {latitude: 10, logitude: 10}}
      ]
    }					
  ]
});

chart.render();
chart1.render();

function showTooltip(e){
  var xInPixel = chart.axisX[0].convertValueToPixel(e.dataPoint.z.latitude);
  var yInPixel = chart.axisY[0].convertValueToPixel(e.dataPoint.z.logitude);        
  $("#chartContainer").find(".canvasjs-chart-canvas").get(1).dispatchEvent(createEvent("mousemove", null, null, xInPixel, yInPixel));

}

function createEvent(type, screenX, screenY, clientX, clientY){
  var event = new MouseEvent(type, {
    view: window,
    bubbles: true,
    cancelable: true,
    screenX: screenX, 
    screenY: screenY, 
    clientX: clientX, 
    clientY: clientY    
    /* whatever properties you want to give it */
  });

  return event;
}