evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Triggering inactive status on click (instead of hover)

Good day!

I have a stacked bar chart and I would like to click on a series and trigger the inactive state on the rest of the series. Meaning what happens by default when you hover over a series where the rest have lower opacity, but on click.

Here's my attempt so far: https://codepen.io/ev0k3r/pen/oNErzbp

I get the index of the series and then use setState("inactive", true) for all the series that don't match this ID, but the problem is that on mouseOut, the states get reset. If I disable the invactive state from the plotOptions, then the functionality doesn't work on click.
Disabling mouseEventTracking is out as well (from my understanding of the functionality).

I read in the documentation that return false for the mouseOver/mouseOut disables the functionalty but I probably didn't understand that correctly.

Could you please suggest a workaround? The intended functionality is this:

Image

Thank you in advance!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

Hello evoker!
Thanks for contacting us with your question!

You can disable the inactive state and then after clicking just change the opacity of the point of clicked series. You can check it in the demo below.

Demo: https://codepen.io/hubertkozik/pen/KKQjrRJ

Feel free to ask any further questions.
Best regards!
Hubert Kozik
Highcharts Developer
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

Hi Hubert,

thanks for the reply and your solution!

That's a great idea but when you click for example on the green part and then hover over the red part in the 3rd row, that gets highlighted as well. So both stay highlighted.

Do you have any idea what might be causing this behavior?

Thanks again!
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

And follow up question, is there any way to revert everything to normal when the user clicks on the same part again?

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

evoker,
I have made a small mistake, it is better to use a point.update method than point.graphic.attr. To 'unclick' the series you can add some more custom logic, like in the demo below.

Demo: https://codepen.io/hubertkozik/pen/yLvddjw

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

Thanks so much!

I hope I can get the clicked property to work in Angular, I am using the highcharts-angular wrapper.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

You're welcome! According to clicked property using Angular I think the simplest solution would be to cast it as any or extend the proper interface to add this property.

In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

I was wondering if you could help me with one more thing about this functionality. I just realized we're using Highcharts 7 and this doesn't seem to work there. Any ideas on how I could do this in Highcharts 7?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

evoker,
I think the best way will be to update Highcharts to the newest release, which is Highcharts v10.1.0. We are providing support only for the latest version.

Kind regards!
Hubert Kozik
Highcharts Developer
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

Thanks again and yes, we just did that thank you! I also posted a follow up question in another thread. I would really appreciate a reply.

Thanks!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

You're welcome! My colleague is working on your topic, he will answer as soon as possible :)
Hubert Kozik
Highcharts Developer
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Triggering inactive status on click (instead of hover)

Thanks! You guys and gals rock!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Triggering inactive status on click (instead of hover)

You're welcome! Feel free to contact us again if you have some more questions.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”