incutonez
Posts: 4
Joined: Thu Sep 08, 2022 1:32 pm

Change DataLabel Color on Hover

In this example, I'd like to change the color of the state's abbreviation text color (not the state's shape) to black on hover of the state's shape.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change DataLabel Color on Hover

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

All you need to add is logic on point.events.mouseOver and point.events.mouseOut events. Inside this callback function you can use a point.update where you can change the font color of the data label.

Demo: https://jsfiddle.net/BlackLabel/m6s0uveb/4/
API Reference: https://api.highcharts.com/highmaps/ser ... .mouseOver
https://api.highcharts.com/highmaps/ser ... s.mouseOut
https://api.highcharts.com/class-refere ... int#update

Let me know if you have any further questions.
Regards!
Hubert Kozik
Highcharts Developer
incutonez
Posts: 4
Joined: Thu Sep 08, 2022 1:32 pm

Re: Change DataLabel Color on Hover

Amazing! I knew there had to be a way of doing this. Thank you so much!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change DataLabel Color on Hover

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
incutonez
Posts: 4
Joined: Thu Sep 08, 2022 1:32 pm

Re: Change DataLabel Color on Hover

Hey Hubert, there's one minor issue with the solution you gave me (fiddle here). It appears that if you have null data that renders, the dataLabel only changes when you hover over the text... it's not always 100% to repro, and you have to move your mouse really slow to the borders of the state's shape. I can usually repro if I hover over the bottom portion of NY, and then head into the top of PA... PA's text will stay white until I hover over the text. If you can't repro, let me know, and I can try uploading a video somewhere.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change DataLabel Color on Hover

incutonez,
If you could send me a video/GIF of a reproduction of that issue I would be grateful because when I'm trying to reproduce everything seems to work correctly.

Regards!
Hubert Kozik
Highcharts Developer
incutonez
Posts: 4
Joined: Thu Sep 08, 2022 1:32 pm

Re: Change DataLabel Color on Hover

Hey Hubert, sure thing, here you go!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change DataLabel Color on Hover

incutonez,
This is related to the empty value of the point. If you set null as the value of point (when splicing), the point has only dataLabel visible, and this dataLabel actually becomes a point - that's why the event is triggered on hovering the dataLabel, not a point. As a workaround, I suggest changing only the value property inside the point to null, not the point object itself (while splicing) - like in the demo below.

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

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”