JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.cursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.highlighter.js"></script>

<div id="chart1"></div>

JavaScript

var mydata = [[0,3],[1,7],[2,9],[3,1],[4,4],[5,6],[6,8],[7,2],[8,5]];
$(document).ready(function(){
  var plot1 = $.jqplot (
      'chart1', 
      [mydata],
      {
          seriesDefaults: {
              showMarker: false
          },
          cursor: {
              show: true,
              showTooltip: false,
              showVerticalLine: true,
              showHorizontalLine: false
          },
          highlighter: {
              show: true, 
              showTooltip: false
          }
      }
  );
});

//Show nearest point's tooltip
$("#chart1").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, data){
    var c_x = datapos.xaxis;
    var index_x = -1;
    var pos_index = 0;
    var low = 0;
    var high = data.data[0].length-1;
    while(high - low > 1){
        var mid = Math.round((low+high)/2);
        var current = data.data[0][mid][0];
        if(current <= c_x)
            low = mid;
        else
            high = mid;
    }
    if(data.data[0][low][0] == c_x){
        high = low;
        index_x = high;
    }else{
        var c_low = data.data[0][low][0];
        var c_high = data.data[0][high][0];
        if(Math.abs(c_low - c_x) < Math.abs(c_high - c_x)){
            index_x = low;
        }else{
            index_x = high;   
        }
    }
    //Display marker and tooltip
    if(data.series[0].data[index_x]){
        var x = data.series[0].gridData[index_x][0];
        var y = data.series[0].gridData[index_x][1];
        var r = 5;
        var highlightCanvas = $(".jqplot-highlight-canvas")[0];
        var context = highlightCanvas.getContext('2d');
        context.clearRect(0,0,highlightCanvas.width,highlightCanvas.height);
        context.strokeStyle = 'rgba(47,164,255,1)';
        context.fillStyle = 'rgba(47,164,255,1)';
        context.beginPath();
        context.arc(x,y,r,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
        context.fill();
        //Display tooltip on nearest point
 ...