Add an event for legend item hovering
You might add mouseover/mouseout events to legend items. This event should provide the index of the legend item.
That gives the developer more control about what to do when hovering legend items and gives him the control to devide whether a tooltip should be shown or the series should be highlighted or whatever.
A common use case might be to show tooltips when hovering legend items --> http://jsfiddle.net/ArmRM/481/
Here’s how to add the events with jQuery:
http://jsfiddle.net/highcharts/5V33F/
-
Sonja Ritz commented
In the Events tab, click the Add button and select the event you want to use. You can then customize the settings for that event.
https://dotsnel.com/ -
Ivan Seredkin commented
Based on @Jorge solution I created a universal function that will work in pie or bar charts:
```
const legendItemHover = (event) => {
const { chart: legendHoveredChart } = event.target;
const { legend, tooltip } = legendHoveredChart;
for (const item of legend.allItems) {
item.legendItem.on('mouseover', () => {
const data = item?.series?.data[item.index] || item.data[0];
tooltip.refresh(data);
legend.allItems.forEach((itm) => itm.setState('inactive'));
item.setState('hover');
}).on('mouseout', () => {
tooltip.hide();
legend.allItems.forEach((itm) => itm.setState('normal'));
});
}
};
```pie chart plotOptions:
```
{
pie: {
events: {
afterAnimate(event) {
legendItemHover(event);
},
},
}
}
```bar chart plotOptions:
```
{
series: {
events: {
afterAnimate(event) {
legendItemHover(event);
},
},
}
}
``` -
Mahdi commented
How to when legend item hovering for show all data label (for each legend) in spline or any chart type?
-
Jorge Tolentino commented
Solution:
http://jsfiddle.net/h1czaysg/1/Tested in Chrome 62.
-
Sarah Forst commented
This seems almost like a bug to me. For example, in this chart:
http://jsfiddle.net/M5j2c/1/I want to bind a behavior to mouse over of both a pie wedge and a legend item. If I hover over the pie, the wedge highlights, the legend item highlights, and my event is triggered. However, if I hover over the legend item, I get the first two behaviors, but no event. This seems inconsistent. I am implementing the jquery solution, but it would be nice if this was built in.
-
@Patrick, your approach with addressing the legend-items is much better and cleaner.
In the future, Highcharts will revolve more around CSS styling and class names, so this will not change. -
Patrick commented
Perhaps a slightly better approach that I use is to target the legend item itself instead of just the text. Here is an example:
http://jsfiddle.net/LAbQA/1/ -
Patrick commented
I wanted to add that the approach you posted requires us to know the classes and element types used to render the chart. If this ever changes, it would force us to have to change as well. Just a thought...
-
Patrick commented
That is exactly what I do, I just thought it would be nice again to have some hover options without having to create an event handler.
-
Patrick commented
I wrote a custom event handler to refresh/hide the tooltip when hovering over a legend. It would be nice if this was natively supported in the apis.
-
s commented
bump bump... first thing i went to try
-
jtreankler commented
Ditto for mouseover/mouseout events on axes. Particularly x-axis. I'd very much like to show the total for all the columns in one timeframe tick of the x-axis when the User hovers over the x-axis label text! Similary, would need the index of the tick on the x-axis.
-
petersen commented
Another possibility might be to add an option like "showTooltipsOnLegendItemHover" handling this. Most probably with a bit more handy name :)