We can also use the highlighter on bar charts. We decide we will add the highlighter plugin to our stacked bar chart, Monthly Revenue by Product Category, from Chapter 4, Horizontal and Stacked Bar Charts, executing the following steps:
We use the same options as our Social Media Shares chart to which we added the highlighter plugin. However, in this chart, we decide to turn off the halo on the data point; so, we set
showMarker
tofalse
. We also only want thex
value. So, we settooltipAxes
tox
:... highlighter: { show: true, tooltipLocation: 'e', showMarker: false, tooltipAxes: 'x' }, ...
We will also experiment and highlight the corresponding legend item when we highlight a bar. We'll do that by creating an event handler for
jqplotDataHighlight
. If we move our cursor from one stack to another within the same bar,jqplotDataUnhighlight
will not fire. So, we begin by removing thehighlight
class from all the...