Shared tooltip – detect hovered element

[jhansen]

When I have a stacked column chart, and a shared tooltip, in the tooltip is there a way of detecting the element I am hovering over (e.g. so I can highlight that element in the tooltip content)?

[Ananya]

@jhansen,

You can use the mouseover event of the dataseries to detect which series is being hovered over, and use toolTip contentFormatter to style it accordingly.

Please take a look at this JSFiddle for a working example of the same.

—
Team CanvasJS
Ananya Deka

[jhansen]

Thanks. That works, but unfortunately not on a column that is missing a matching data point (which is what I have). For example, if I remove the values “{ x: 10, y: 71 }, { x: 20, y: 55 },” from the first data series, the code no longer works for the first two columns. Is there a version of the code you can suggest that would work where the stacked columns (and same for a stacked bar) don’t all have the same “x” points?
Thanks

[Ananya]

@jhansen,

Equating hoveredSeries === e.entries[i].dataSeries.index should work for you, even in the case of missing datapoints. Please take a look at this updated JSFiddle for the complete code.

—
Ananya Deka
Team CanvasJS