bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Hi,

The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

PFA MissingLabels.png, on hover of legend CompletionCode_QA, the data label from the first bar is shown which is 145, however the data label from the second bar is not shown.

This issue is observed in almost all of the versions. - > 7.2.2, 8.2.2 & 10.0.0.

There is one flag allowOverlap exposed by the HighChart library which decides whether to show all the labels or not.

By default, that flag is set to false which means show labels for some of the bars which have enough space to accommodate the label, for other bars the number is hidden.

When we set the flag to true, it shows labels for all the bars irrespective of whether there is enough space or not.

Setting the flag allowOverlap to true shows all the data labels on the bar and hence the issue is resolved because in that case the data label on the bar is shown on hover of the legends as well.

However, the chart does not look good when all the data labels are shown.

PFA WithLabelForAllCC.png & WithoutLabelForAllCC.png.

Can we show the data labels on hover of the legends even when the allowOverlap is set to false?
Attachments
WithLabelsForAllCC.png
WithLabelsForAllCC.png (85.71 KiB) Viewed 2594 times
WithoutLabelsForAllCC.png
WithoutLabelsForAllCC.png (59.39 KiB) Viewed 2594 times
MissingLabels.png
MissingLabels.png (70.49 KiB) Viewed 2596 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Hello bhagyaMazire!
We appreciate you reaching out to us with your inquiry.

Unfortunately, there is no built-in events on mouseOver and mouseOut for legend items, so it have to be added on chart load. If you want to show data labels, just enable them on proper points, when hovering a legend item. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/50h2637x/
API Reference: https://api.highcharts.com/class-refere ... int#update
https://api.highcharts.com/highcharts/chart.events.load

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

hubert.k wrote: Wed Jun 29, 2022 8:04 am Hello bhagyaMazire!
We appreciate you reaching out to us with your inquiry.

Unfortunately, there is no built-in events on mouseOver and mouseOut for legend items, so it have to be added on chart load. If you want to show data labels, just enable them on proper points, when hovering a legend item. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/50h2637x/
API Reference: https://api.highcharts.com/class-refere ... int#update
https://api.highcharts.com/highcharts/chart.events.load

Let me know if you have any further questions.
Kind regards!
Hi Hubert,

Thanks for the quick response.

I've updated your jsfiddle with some data and additional props to the chart.

Here is the link : https://jsfiddle.net/dumzjwc3/

Please check this fiddle, the issue is still there.

Also PFA, data label is not shown for "lmn" & "ert".
Attachments
DataLabelNotVisible.png
DataLabelNotVisible.png (85.55 KiB) Viewed 2564 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

bhagyaMazire,

Thanks for your demo. Please, take a look, that in my previous demo I didn't enable the data labels and also in the changed one below I disable them, just like you requested in your first post to show the data labels on hover of the legend items even when the allowOverlap is set to false. The data labels will be shown (will be enabled) only if you hover over the legend item.

Demo: https://jsfiddle.net/BlackLabel/6xqzyh3d/

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

hubert.k wrote: Wed Jun 29, 2022 11:57 am bhagyaMazire,

Thanks for your demo. Please, take a look, that in my previous demo I didn't enable the data labels and also in the changed one below I disable them, just like you requested in your first post to show the data labels on hover of the legend items even when the allowOverlap is set to false. The data labels will be shown (will be enabled) only if you hover over the legend item.

Demo: https://jsfiddle.net/BlackLabel/6xqzyh3d/

Let me know if that fits your requirement.
Regards!
Can we have this feature when data labels are enabled? Because we need to show data labels always.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Something like this? https://jsfiddle.net/BlackLabel/aup8fvd2/
Or something like this? (with inactive states disabled for a better visibility) https://jsfiddle.net/BlackLabel/mj7arbq6/

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

rafalS wrote: Wed Jun 29, 2022 2:12 pm Something like this? https://jsfiddle.net/BlackLabel/aup8fvd2/
Or something like this? (with inactive states disabled for a better visibility) https://jsfiddle.net/BlackLabel/mj7arbq6/

Best regards!
No, we want to show the data labels on hover of the legends. Both the jsfiddles are hiding data labels on hover of the legend. By data label I mean the number on the bar.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

bhagyaMazire,
I don't think we understand each other.

First, you said
we want to show the data labels on hover of the legends
which means, that you want to have hidden data labels and show data labels only for hovered series, and in the next post, you said
we need to show data labels always
which is the opposite behaviour of this described in the first post. Could you describe precisely what behaviour do you want to achieve on the chart? You can use some images, gifs to show each state of the chart etc.
Regards!
Hubert Kozik
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

hubert.k wrote: Thu Jun 30, 2022 6:58 am bhagyaMazire,
I don't think we understand each other.

First, you said
we want to show the data labels on hover of the legends
which means, that you want to have hidden data labels and show data labels only for hovered series, and in the next post, you said
we need to show data labels always
which is the opposite behaviour of this described in the first post. Could you describe precisely what behaviour do you want to achieve on the chart? You can use some images, gifs to show each state of the chart etc.
Regards!
Hi,

There are 2 things
1. Showing the data labels on the bar always which means whether you hover over the legends or not.
2. Highlight the data label for hovered legend.

Hope this is clear now.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

bhagyaMazire,
Thank you for your clarification. Now, I understand you correctly. Data labels are shown always (but with allowOverlap set to false so some is hidden) and when you hover series on legend items, data labels from that series will be highlighted, you can adjust the highlight to your own preferences. Please, check the demo below.

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

Let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

hubert.k wrote: Thu Jun 30, 2022 10:26 am bhagyaMazire,
Thank you for your clarification. Now, I understand you correctly. Data labels are shown always (but with allowOverlap set to false so some is hidden) and when you hover series on legend items, data labels from that series will be highlighted, you can adjust the highlight to your own preferences. Please, check the demo below.

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

Let me know if you have any further questions.
Kind regards!
Hi,

Thank you for this solution. The data labels are working as expected now. However, this solution has removed the highlighting of the bar on legend hover.
Can you please provide a solution for that?

PFA, on hovering the legend the respective bars are highlighted and other bars are grayed out.

Can we have both the features together?
Attachments
DataLabelNotVisible.png
DataLabelNotVisible.png (85.55 KiB) Viewed 2482 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

bhagyaMazire,
States weren't changing on hovering the legend items, because we have overridden this effect. Of course, we can have both features working together, just add some setState method called on proper series - just like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/vychunqp/
API Reference: https://api.highcharts.com/class-refere ... s#setState

Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Hi,

We tried this fix and it is working fine for less data.
However for large data the UI crashes on hover of legend.

We are using version 7.2.2.

One more issue observed for large data is that bar size is becoming very small, PFA.
Attachments
49690.png
49690.png (32.19 KiB) Viewed 2364 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Hi!

When you're using large data (higher than https://api.highcharts.com/highcharts/s ... tThreshold), the boost module kicks in - see more info about the boost module and its limitations:https://www.highcharts.com/docs/advance ... ost-module

Some of the biggest limitations:
  • rectangles for column and bar charts are always drawn as a single 1 pixel wide line
  • points are very prymitive and stripped out form most of their features, for example there's no longer point.update() method
Knowing all the above we can get the conclusion that, unfortunately, your feature is not possible to achieve together with a boost.

If you don't need a boost and you have it added in your project accidentally, then you can disable it either by:
  • setting series.boostThreshold to a higher number that number of your points, or
  • removing the modules/boost.js module from your project
If you do need/want a boosted chart, then it probably means that you have more than thousands of points. In this situation, displaying this huge number of dataLabels doesn't make sense in a chart like this.

Let me know if you have any questions or concerns.

Best regards,
Rafal Sebestjanski,
Highcharts Team Lead
bhagyaMazire
Posts: 26
Joined: Mon Jun 27, 2022 9:25 am

Re: The data label on the bar is not shown for some legends on hover of the legend in the stacked column chart

Hi,

What are the known disadvantages of disabling boost?

Will it cause any issue related to memory leak as we are already facing some with Highchart when boost is enabled.

Please check here - viewtopic.php?f=9&t=49210

Return to “Highcharts Usage”