john.h
Posts: 20
Joined: Mon Jan 25, 2021 5:13 pm

Highcharts Legend Item Hover

I'm creating a stacked area graph that when an area is hovered all other areas should have their opacity reduced. I noticed that something like this happens when you hover legend items. If a legend item is hovered, the corresponding series becomes more opaque and the other series become more transparent. Is there any way to imitate this exact behavior when hovering the series directly? If possible, is there a way to control the exact value for opacity?

Thank you
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Legend Item Hover

Hi john.h,

Thanks for contacting us with your question.

You can achieve effect like that using mouseOver and mouseOut events. They can be used to update series opacity which is being set explicitly so you can use exact values. Additionally to make chart behaviour consistent the solution requires two other options: trackByArea: true, and stickyTracking: false.
Demo: https://jsfiddle.net/BlackLabel/rkjaqx1w/
API reference: https://api.highcharts.com/highcharts/s ... kyTracking,
https://api.highcharts.com/highcharts/s ... rackByArea,
https://api.highcharts.com/highcharts/s ... .mouseOver

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
john.h
Posts: 20
Joined: Mon Jan 25, 2021 5:13 pm

Re: Highcharts Legend Item Hover

Thank you for your reply!
Your demo addresses the opacity question very well. One thing I noticed is that if you move out of one area to another area and stop the cursor immediately, sometimes you can cause the tooltip to disappear. Do you have a solution for that? I believe it is being caused by a redraw
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Legend Item Hover

Hi john.h,

That was caused by update() method. I have just realised that my previous solution was overcomplicated. All what you need to use is actually trackByArea, stickyTracking, and opacity property for inactive and hover states.
Demo: https://jsfiddle.net/BlackLabel/20xsLzqt/
API reference: https://api.highcharts.com/highcharts/s ... ve.opacity

Let me know if it works fine now.
Regards!
Mateusz Bernacik
Highcharts Developer
john.h
Posts: 20
Joined: Mon Jan 25, 2021 5:13 pm

Re: Highcharts Legend Item Hover

That looks close to what I want, however, is there a way to accomplish that behavior with a split tooltip?
tooltip {
split: true
}
seems to break area opacity changes. https://jsfiddle.net/jL26hbw4/2/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts Legend Item Hover

Hi john.h,

It is not exactly like that, it doesn't break opacity changes. Previous solution is based on series state, and when one series is being hovered, the series have hover state and other series inactive state. When you use either shared or split tooltip option, all series is being selected and inactive state is not applied anymore.
You have two options in this case:
- use tooltip formatter to create a custom tooltip which would show informations about all series
API reference: https://api.highcharts.com/highcharts/tooltip.formatter

- apply inactive state to not hovered series manually
API reference: https://api.highcharts.com/class-refere ... s#setState

Please read this ticket for more detailed information about this problem.

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”