Hide highligher for only few series.

by Boro

HTML

<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.highlighter.min.js"></script>
<!--[if lt IE 9]>
  <script src="http://www.prioritymarketers.com/jqplot/src/excanvas.min.js"></script>
<![endif]-->


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

CSS

/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/

.jqplot-target {
  position: relative;
  color: #666666;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  /*    height: 300px;
    width: 400px;*/
}


/*rules applied to all axes*/

.jqplot-axis {
  font-size: 0.75em;
}

.jqplot-xaxis {
  margin-top: 10px;
}

.jqplot-x2axis {
  margin-bottom: 10px;
}

.jqplot-yaxis {
  margin-right: 10px;
}

.jqplot-y2axis,
.jqplot-y3axis,
.jqplot-y4axis,
.jqplot-y5axis,
.jqplot-y6axis,
.jqplot-y7axis,
.jqplot-y8axis,
.jqplot-y9axis,
.jqplot-yMidAxis {
  margin-left: 10px;
  margin-right: 10px;
}


/*rules applied to all axis tick divs*/

.jqplot-axis-tick,
.jqplot-xaxis-tick,
.jqplot-yaxis-tick,
.jqplot-x2axis-tick,
.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick,
.jqplot-yMidAxis-tick {
  position: absolute;
  white-space: pre;
}

.jqplot-xaxis-tick {
  top: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-top: 10px;*/
  vertical-align: top;
}

.jqplot-x2axis-tick {
  bottom: 0px;
  /* initial position untill tick is drawn in proper place */
  left: 15px;
  /*    padding-bottom: 10px;*/
  vertical-align: bottom;
}

.jqplot-yaxis-tick {
  right: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-right: 10px;*/
  text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
  right: -20px;
  margin-right: 0px;
  padding: 1px 5px 1px 5px;
  /*    background-color: white;*/
  z-index: 2;
  font-size: 1.5em;
}

.jqplot-y2axis-tick,
.jqplot-y3axis-tick,
.jqplot-y4axis-tick,
.jqplot-y5axis-tick,
.jqplot-y6axis-tick,
.jqplot-y7axis-tick,
.jqplot-y8axis-tick,
.jqplot-y9axis-tick {
  left: 0px;
  /* initial position untill tick is drawn in proper place */
  top: 15px;
  /*    padding-left:...

JavaScript

$(document).ready(function() {
  // Some simple loops to build up data arrays.
  var cosPoints = [];
  for (var i = 0; i < 2 * Math.PI; i += 1) {
    cosPoints.push([i, Math.cos(i)]);
  }

  var sinPoints = [];
  for (var i = 0; i < 2 * Math.PI; i += 0.4) {
    sinPoints.push([i, 2 * Math.sin(i - .8)]);
  }

  var powPoints1 = [];
  for (var i = 0; i < 2 * Math.PI; i += 1) {
    powPoints1.push([i, 2.5 + Math.pow(i / 4, 2)]);
  }

  var powPoints2 = [];
  for (var i = 0; i < 2 * Math.PI; i += 1) {
    powPoints2.push([i, -2.5 - Math.pow(i / 4, 2)]);
  }

  var plot3 = $.jqplot('chart', [cosPoints, sinPoints, powPoints1, powPoints2], {
    title: 'Line Style Options',
    // Set default options on all series, turn on smoothing.
    seriesDefaults: {
      rendererOptions: {
        smooth: true
      }
    },
    // Series options are specified as an array of objects, one object
    // for each series.
    series: [{
      // Change our line width and use a diamond shaped marker.
      lineWidth: 2,
      markerOptions: {
        style: 'dimaond'
      },
      highlighter: {
        showTooltip: false,
        showMarker: false,
        show: false,
        foramtString: null
      }
    }, {
      // Don't show a line, just show markers.
      // Make the markers 7 pixels with an 'x' style
      showLine: false,
      markerOptions: {
        size: 7,
        style: "x"
      }
    }, {
      // Use (open) circlular markers.
      markerOptions: {
        style: "circle"
      }
    }, {
      // Use a thicker, 5 pixel line and 10 pixel
      // filled square markers.
      lineWidth: 5,
      markerOptions: {
        style: "filledSquare",
        size: 10
      }
    }],

    highlighter: {
      show: true
    }
  });

  $('#chart').bind('jqplotMouseMove', function(event, xy, axesData, neighbor, plot) {
    if (neighbor && neighbor.seriesIndex == 0) {
      var drawingCanvas = $(".jqplot-highlight-canvas")[0];
      var context =...