Highlight line on mouseover it.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script>
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/excanvas.min.js"></script>
<![endif]-->


<div id="chart1" style="margin-top:20px; margin-left:20px; width:600px; height:300px;"></div>

JavaScript

$(document).ready(function() {
  $.jqplot.postDrawHooks.push(function() {
    var swatches = $('table.jqplot-table-legend tr td.jqplot-table-legend-swatch');
    var labels = $('table.jqplot-table-legend tr td.jqplot-table-legend-label');
    var kk = 5;
    $(swatches).hide();
    $(labels).hide();
    $(swatches[0]).show();
    $(labels[0]).show();
    $(swatches[kk]).show();
    $(labels[kk]).show();
  });
  var s1 = [
    [10.0, 11.0, 11.0, 12.0, 12.0, 14.0],
    [10.0, 11.0, 12.0, 12.0, 12.0, 12.0],
    [10.0, 13.0, 14.0, 15.0, 15.0, 16.0],
    [10.0, 10.0, 11.0, 11.0, 11.0, 12.0],
    [10.0, 10.0, 11.0, 12.0, 12.0, 12.0]
  ];
  var s2 = [10.0, 10.4, 10.816, 11.248640000000002, 11.698585600000003, 12.166529024000004];
  s1.push(s2);
  $.jqplot('chart1', s1, {
    seriesDefaults: {
      showMarker: false,
      pointLabels: {
        show: false
      },
    },
    series: [{
      label: 'Process A',
      color: 'red'
    }, {
      label: 'Process A',
      color: 'red'
    }, {
      label: 'Process A',
      color: 'red'
    }, {
      label: 'Process A',
      color: 'red'
    }, {
      label: 'Process A',
      color: 'red'
    }, {
      label: 'Process B',
      color: 'blue'
    }],
    legend: {
      show: true,
      location: 'nw',
      placement: 'inside',
      fontSize: '11px'
    }
  });
  $('#chart1').bind('jqplotDataHighlight', function(event, xy, axesData, neighbor, plot) {
   console.log("test");
    var drawingCanvas = $(".jqplot-highlight-canvas")[0];
    var context = drawingCanvas.getContext('2d');
    context.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);
    for (var i = 0; i < plot.series.length; i++) {
      var value = hitTestSegments(plot.series[i].gridData, xy, plot.series[i].lineWidth);
      if (value > -1) {
        //draw the highlight
        context.beginPath();
        for (var j = 0; j < plot.series[i].gridData.length; j++) {
          var p = plot.series[i].gridData[j];
          if (j == 0)
          ...