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

Displaying a tooltip for all points of a series on click

Hello!

With your amazing help I was able to set bars as inactive on click but the next hurdle is to display a tooltip for each points in a series of a stacked bar chart.

What I have so far is this: https://codepen.io/ev0k3r/pen/oNErzbp

The idea was copied from a SO post that duplicates the tooltip but I haven't been able to make it work so far.

I know it's not possible to display several tooltips at the same time but is there a possible workaround? Like the duplication idea?

I would like to have a tooltip for each bar part that gets highlighted. So if the user clicks on the green part of the first bar (see codepen above) to have 3 tooltips appear (on click) for all 3 green parts (ideally above the bar).

I am probably asking for a lot but also any guidance if not a complete solution would be greatly appreciated!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Displaying a tooltip for all points of a series on click

Hello,

You can invoke the display of a tooltip for a point with the refresh() method and after that duplicate them.
Demo: https://jsfiddle.net/BlackLabel/xk0ug2ob/

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Displaying a tooltip for all points of a series on click

Thanks so much for you solution, there's so much let to learn about Highcharts!

I have two follow-up questions/comments, if I may:

The clicked property doesn't seem to be working any more, it is never set to true, so clicking again on the same bar to hide the tooltips and return opacity to 1, no longer works. Any ideas on why?

Also, would it be possible to show the tooltips above the bar? I am going to change the layout and design a bit and center the anchor in the middle but I would really appreciate any advice on that front as well.

Thanks again!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Displaying a tooltip for all points of a series on click

Hi,

In fact, I didn't notice it. This is a problem with updating the chart to enable the tooltip before duplicating.

Another way is to use SVGRenderer to generate tooltip-like labels, but then you also need to generate categories in a similar way because using HTML on axis labels generates them at a higher index than elements from SVGRenderer.

Demo: https://jsfiddle.net/BlackLabel/ejLbgd41/
API: https://api.highcharts.com/class-refere ... VGRenderer

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Displaying a tooltip for all points of a series on click

Thanks so much Michał! I was able to fix the second click myself but your solution is certainly cleaner.

If you have some time, would you be able please to give me a suggestion about not displaying a tooltip for 0 values? I guess it must be easy, but only if you got time.

Thanks again!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Displaying a tooltip for all points of a series on click

You're welcome!

You can add a simple condition where the value must be different from 0:

Code: Select all

if (otherPoint.y !== 0) {}
Demo: https://jsfiddle.net/BlackLabel/q6jkd4f3/

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Displaying a tooltip for all points of a series on click

Thanks for the reply and your huge help Michał! It's actually that simple.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Displaying a tooltip for all points of a series on click

That's great to hear!

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
evoker
Posts: 40
Joined: Tue Dec 01, 2020 1:01 pm

Re: Displaying a tooltip for all points of a series on click

Hi Michał, I must ask for your valuable help once again.

I noticed in the html that the tooltips are being created multiple times for the same point. So in this case I think it's creating 2-3 instances of the same tooltip and they overlap so it's not visible.

Do you have any ideas why this is occurring?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Displaying a tooltip for all points of a series on click

I'm glad to hear,

The reason is that the code responsible for generating them is not necessarily in the loop responsible for changing the transparency of the bars. Just pull this logic somewhere beyond the series forEach loop.

Demo: https://jsfiddle.net/BlackLabel/jxstfed3/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”