We move on to the highlighter plugin. This plugin works very much like the cursor plugin, but it only highlights the data point that our cursor is hovering over. We will start with the Social Media Shares chart from Chapter 2, More Line Charts, Area Charts, and Scatter Plots, found in 1168_02_01.html, which we created last week. There are a lot of data points to test with:
We start by including the highlighter plugin file with the other included JavaScript files:
<script src="../js/jqplot.dateAxisRenderer.min.js"></script> <script src="../js/jqplot.highlighter.min.js"></script>We will only add the
highlighteroption to our chart. No other change to the chart is necessary. As with the cursor plugin, we setshowtotrueto enable the highlighter plugin. We want a halo to appear around the data point when we highlight it, so we setshowMarkertotrue:highlighter: { show: true, showMarker: true,