jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Hide datalabels when the bar is to small to fit them. Stacked bar chart

Hi all,

I think this is a possible bug, but I'm not sure. The datalabels on the right hand side isn't hiding as the one left side.
Screenshot at 2022-01-25 12-17-29.jpg
Screenshot at 2022-01-25 12-17-29.jpg (32.47 KiB) Viewed 1416 times
Is there any work around to fix this? Example here https://jsfiddle.net/jodarove/zjbe507r/10/

Thank you!
José Romero
Developer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Hide datalabels when the bar is to small to fit them. Stacked bar chart

Hi,

Thanks for contacting us with your question!

These are not bugs, but prevention of overlapping and overflow of labels when they don't have enough space. You can change it by the following settings:

Code: Select all

dataLabels: {
   allowOverlap: true,
   overflow: 'allow',
}
Demo:
https://jsfiddle.net/BlackLabel/eLmjgpqy/

API References:
https://api.highcharts.com/highcharts/p ... s.overflow
https://api.highcharts.com/highcharts/p ... lowOverlap

As you can see on the demo, your labels are now a little bit messy. You can try to fix this by adding margin for the chart, or rotatation to dataLabels.

Demo:
https://jsfiddle.net/BlackLabel/987hewzs/

API Reference:
https://api.highcharts.com/highcharts/chart.marginRight
https://api.highcharts.com/highcharts/p ... s.rotation

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Re: Hide datalabels when the bar is to small to fit them. Stacked bar chart

Hi Magdalena,

Thank you for your reply! We need the datalabels to hide when there isn't enough space, as you can see above the red bar is functioning properly. But the grey bar, on the far right, is not behaving the same way.

Best,
José Romero
Developer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Hide datalabels when the bar is to small to fit them. Stacked bar chart

Hi jromero,

Thank you for clarifying!

You can add a condition in the label formatter function, which check if the point box is wide enough to fit the text.

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

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
jromero
Posts: 17
Joined: Wed Jan 19, 2022 1:54 pm
Contact: Website Twitter

Re: Hide datalabels when the bar is to small to fit them. Stacked bar chart

Hi magdalena,

Thank you so much! that's exactly what we need it!

Enjoy the weekend!

Best,
José Romero
Developer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Hide datalabels when the bar is to small to fit them. Stacked bar chart

That's great to hear! In case of any further questions, feel free to contact us again!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”