anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

show datalabels on legends hover

Hi,

how can I show/display the datalabels only when I hover on the legends? Kindly help

https://jsfiddle.net/v9qcwuo8/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

Thanks for contacting us with your question.

To do something like that you can add a mouseover to series, in which you would update series options enabling data labels.
Demo: https://jsfiddle.net/BlackLabel/t9ma3pLv/
API reference: https://api.highcharts.com/class-refere ... Element#on

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

yes,Thanks I am looking for something like this. However, the datalabels doesnt go away when we mouseout on legends. I have tried adding mouse out but no luck. Could you please help on this as well. Thanks!
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

for some reason, .on method inside load() doesn't seems to be working for me, is there any way to call mouseover event on hover of legends?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

I was thinking that you only want to show data labels. If you want to hide them too, then my initial approach most likely won't work in this case, because each time you update your series, the series is being destroyed and created again and mouseout event is removed.

I would suggest using data labels attributes, for example opacity which seems to be a good solution in this case. Also, yout don't need to call .on method inside load event. You can call it anywhere once chart is created.
Demo: https://jsfiddle.net/BlackLabel/u571kfzx/

Let me know what do you think about this solution.
Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Hi,
Thanks, that did work,I have one final question here, I am using custom legends , so when I update legends object to useHTML: true, the other series doesn't get dimmed when I hover on legends. How can I get the other series dimmed(grey out) when I hover on custom legends.

Here is the link and screenshots: https://jsfiddle.net/w3eqc84t/3/

Thanks!
Attachments
linechart_hover_custom_legends.png
linechart_hover_custom_legends.png (29.77 KiB) Viewed 2317 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

In mouseOver and mouseOut events, you can loop over all available series and set their state programmatically.
Demo:https://jsfiddle.net/BlackLabel/sty02q9a/
API reference:https://api.highcharts.com/class-refere ... s#setState

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Hi,

That did work great! I have one more small question. when I click on legends(off and on) and still the mouseover on legends, the datalabels doesnt show up for the first time. I have tried adding legend click event but no luck .Here is the screenshot
Attachments
linechart_hover_custom_legends.png
linechart_hover_custom_legends.png (35.68 KiB) Viewed 2301 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

You should use legendItemClick event. Rest of the logic is farily the same.
Demo: https://jsfiddle.net/BlackLabel/qvL47bty/

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Perfect,Thanks!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Thanks , I have one more requirement with this :D . I want to have a background color for the datalables on line charts and backgroundColor property on the datalabels object did the trick except that I want to have the same color as series color.

here is the fiddle link where I have given the background color as black. How can I make the datalabel color dynamic(series color) which is blue back ground for blue line series and black shade for the black colored series: https://jsfiddle.net/Lredw8hq/2/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

Here is a demo: https://jsfiddle.net/BlackLabel/q4jyL0p8/

I used load evend to apply series' colors dynamically. That way you don't need to type specific values yourself. Additionally, in chart's callback function I wrapped mouseOver and mouseOut assignments with setTimeout, to make sure that they are not overwritten with update method called in load event.

Let me know if that was what you were looking for!
Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Fantastic. That works great. I have one more small question. How can we increase the space between datalabel background and the datapoint such that they wont overlap. Can we set any margin on the data label background such that we always maintain some space between datalabel background and the line? please find the screenshot below. Thanks!
Attachments
datapoint_spacing.PNG
datapoint_spacing.PNG (18.4 KiB) Viewed 2245 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

This one might be a bit tough. In general, data labels' placement can be adjusted with x and y options, but there is no option that could simply increase distance between a data label and a point.
Demo: https://jsfiddle.net/BlackLabel/vyxa0knj/

As you can see in the demo, I have slighly changed y value, and in this case data labels look good, but sometimes they are placed below point, for example when point is located close to the top edge. In that case label would most likely overlap with the point.

You could try to implement your custom solution, for example, iterate over points and compare point position with data label position and based on that adjust the placement. Unfortunately something like that can be complicated and frankly speaking goes beyond support scope.

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

Return to “Highcharts Maps”