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

Re: show datalabels on legends hover

Thanks that helps! one more small question here, how can we adjust the width and height of the backgroundColor property of a datalabel so that the width & height can always be set to some static value. I have checked borderWidth property but looks like that serves a different purpose with borderColor which I am not looking out for. Is there any other option to adjust the width and height of a backgroundColor property of a datalabel?
Attachments
datalabel_property.PNG
datalabel_property.PNG (22.01 KiB) Viewed 1728 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

You can use css to do that:

Code: Select all

.highcharts-label-box {
  width: 100px;
  height: 30px;
}
Data label's text will remain in the same place. To learn how to center it please take a look at this topic:
https://stackoverflow.com/questions/554 ... -rectangle

Demo: https://jsfiddle.net/BlackLabel/07k9ubdc/

Regards!
Mateusz Bernacik
Highcharts Developer
anu_1555
Posts: 47
Joined: Sun Nov 28, 2021 8:45 am

Re: show datalabels on legends hover

Thanks! Much Appreciated! also I am trying to achieve the same i.e show datalabels on hover for spiderweb charts and ran into space issues.can we show datalabels only when there is enough space to fit in? The inner most series which is of green color doesn't have enough space to actually fit the datalabels

here is the fiddle link: https://jsfiddle.net/h62fL8ew/2/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

Sure, we can do that, we need to change slighly our approach and use something else than opacity to hide data labels. Display property should do the trick.
Demo: https://jsfiddle.net/BlackLabel/16jegvwn/

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

Thanks, looks like a possible solution. but somehow looks its not consistent enough, when I hover on one of the series, it only shows one datalabel, cant understand how its picking up. also the top datapoint label never appears although there is enough space to show datalabel. please find the screenshot below.
Can you pls explain how its deciding when to show and when to hide. In our case ,we need to show the datalabels when there is enough space between the datapoints
datalabels_spacing.PNG
datalabels_spacing.PNG (40.75 KiB) Viewed 1680 times
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

I agree that in this case it might seems not consistent, but labels are hidden because they could overlap with something else, for example when it comes to that top point that you mentioned, the label is hidden because it could overlap y axis label. Check this example with disabled y axis labels. The data label of top point shows correctly when hovering Allocated Budget series: https://jsfiddle.net/BlackLabel/wym289re/
You might be thinking, why it works fine for Allocated Budget and for Actual Spending not. The reason is pretty much the same, one of series detect that labels could overlap with other. It might seem that there is enough space to show them, but in reality, even though labels of the other series are hidden, they are still present in the DOM. For this specific chart I would suggest setting allowOverlap: true for series that have enough space to show all labels, and false for series like Actual test.
Demo:https://jsfiddle.net/BlackLabel/7c5fqsdo/

Another suggestion that you might want to consider is increasing actual chart area. With more space the problem could be significantly reduced, and now Actual test series is hardly seen anyway.

Feel free to ask 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

Thanks, that seems a possible solution. one more question here I have is , How can I always show the datalabels outside/ inside the spider(series)? Currently few datalabels appearing outside and few of them displaying both inside and outside the series(crossing over the lines) .Is it possible to always show the datalabels either outside or inside of the series(web). I am aware of x and y properties can be set on the datalabels position but that doesnt seems to be a help here as there are connected lines. i.e if we increase the y position the top placed datalabels go outside of the series but the bottom ones will be inside. Kindly suggest.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: show datalabels on legends hover

Hi anu_1555,

There is an option inside, which allows you to define whether label should be placed inside or not, but it only works for series like column, area etc. It is not available for line series. Actually you might want to use x and y options, but set them per point rather than for all data labels. This way you can avoid the placement problem that you mentioned.
Demo: https://jsfiddle.net/BlackLabel/yhq9bpfe/

Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”