Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Dumbell Chart reset tooltip position on mouse hover

Hi, I have a dumbell chart which is having multiple series and each series is having multiple data set. When I am hovering the mouse on any dot, it is quickly resetting the tooltip position and showing in middle, even if mouse pointer is on first dot.

I am writting the content in console so that it is visible what is happening.
Please help and let me know what is the solution for this.
this is the fiddle https://jsfiddle.net/Deokant/7986n3da/41/
Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Re: Dumbell Chart reset tooltip position on mouse hover

Any solution on this ?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dumbell Chart reset tooltip position on mouse hover

Hi Deokant,

Welcome to our forum and thanks for contacting us with your question!

Please set findNearestPointBy: 'xy' property for dumbbell series config and let me know if it helped.
Demo:https://jsfiddle.net/BlackLabel/3Ljb07pz/
API reference:https://api.highcharts.com/highcharts/s ... estPointBy

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Re: Dumbell Chart reset tooltip position on mouse hover

mateusz.b wrote: Wed May 18, 2022 8:04 am Hi Deokant,

Welcome to our forum and thanks for contacting us with your question!

Please set findNearestPointBy: 'xy' property for dumbbell series config and let me know if it helped.
Demo:https://jsfiddle.net/BlackLabel/3Ljb07pz/
API reference:https://api.highcharts.com/highcharts/s ... estPointBy

Let me know if it was what you were looking for.
Regards!
This was exactly I was looking for. Thanks a lot. :D
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dumbell Chart reset tooltip position on mouse hover

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Re: Dumbell Chart reset tooltip position on mouse hover

mateusz.b wrote: Fri May 20, 2022 11:18 am You're welcome! In case of any further questions, feel free to contact us again.
Hello again, now a new requirment came and that is about to show tooltip on legend when mouse hover. I have added formatter in legend but when It is not showing. Below is the URL
https://jsfiddle.net/Deokant/cpqsnbf1/

Also, when I did inspect the legend text, it is howing me as button. Could this be a reason ?
Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Re: Dumbell Chart reset tooltip position on mouse hover

Deokant wrote: Fri May 27, 2022 7:52 am
mateusz.b wrote: Fri May 20, 2022 11:18 am You're welcome! In case of any further questions, feel free to contact us again.
Hello again, now a new requirment came and that is about to show tooltip on legend when mouse hover. I have added formatter in legend but when It is not showing. Below is the URL
https://jsfiddle.net/Deokant/cpqsnbf1/

Also, when I did inspect the legend text, it is howing me as button. Could this be a reason ?
Please update on this.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dumbell Chart reset tooltip position on mouse hover

Hi Deokant,

In Highcharts tooltip works only for points / series on the chart. There is no built-in tooltip for legend and legend items. However, it is possible to create a custom tooltip. Here you can learn how:
https://stackoverflow.com/questions/161 ... n-hovering

labelFormatter allows you to change only the content of the legend item label:
https://api.highcharts.com/highcharts/l ... lFormatter

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
Deokant
Posts: 8
Joined: Tue May 17, 2022 12:00 pm

Re: Dumbell Chart reset tooltip position on mouse hover

mateusz.b wrote: Mon May 30, 2022 8:47 am Hi Deokant,

In Highcharts tooltip works only for points / series on the chart. There is no built-in tooltip for legend and legend items. However, it is possible to create a custom tooltip. Here you can learn how:
https://stackoverflow.com/questions/161 ... n-hovering

labelFormatter allows you to change only the content of the legend item label:
https://api.highcharts.com/highcharts/l ... lFormatter

Let me know if you have any further questions.
Regards!
Hi Mateusz.b,

Thank you again for you help.
I managed to do it using labelFormatter only like I have mentioned in JSfiddle. I found the issue why it was not working when I was hovering over legends. The issue was with 'accessibility.js' . When I am using this JS, it is overlaying a button on top of Legend text and thats why when hovering tooltip was not showing up. I have also tested this without 'accessibility.js' there it is working fine.

Please check below jsfiddles
1) With 'accessibility.js' (This is not working) - https://jsfiddle.net/Deokant/L7n2d1wb/
2) Without 'accessibility.js'(This is working) - https://jsfiddle.net/Deokant/ne2x31f4/4/

But I can't use solution 2 as we are using 'accessibility.js' everywhere. So, to solve this I am using a workaround. When I am inspecting the legend element I see a button on top of legend text with class 'highcharts-a11y-proxy-button'. When I am hdding this button popup is working. So I wrote css to hide this class. I have tested the application after hidding this class and everything is working fine. Below is the work around fiddle
https://jsfiddle.net/Deokant/cpqsnbf1/4/

Thanks again for your help and support.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Dumbell Chart reset tooltip position on mouse hover

Hi Deokant,

Thanks pretty clever, thanks a lot for sharing the workaround with us! Glad to hear you have figure it out and in case of any further questions, do not hesitate to contact us again.

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”