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/
-
Ali Raza commented
Cylinder locks offer strong protection and versatility for residential and commercial spaces. Their design allows easy installation and key replacement without changing the entire lock. Available in various profiles and finishes. https://multipointlocks.co.uk/cylinder-locks
-
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 :)