Suman SInha
Posts: 15
Joined: Wed Aug 19, 2020 8:59 am

Data labels should hide when bar width is small

Hey

As I was going through document for data labels I got this https://jsfiddle.net/suman_sinha/udLy0jx7/

But as per my requirement, can we do that if bar width is small datalabels should hide

Thanks
karolkolodziej
Posts: 895
Joined: Mon Mar 02, 2020 10:11 am

Re: Data labels should hide when bar width is small

Hi!
Thanks for contacting us with your question!

In the label formater function, I added a condition in which I check if the point box if wide enough to fit the text.
I made an assumption that one character has approximately 6px. To see how it works, change the window size.
API: https://api.highcharts.com/gantt/plotOp ... .formatter

Live demo: http://jsfiddle.net/BlackLabel/wey5xvqu/

Let me know if that was what you were looking for!
Regards!
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

How can I achieve that on series type: 'line' ?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

Hello,

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

Do you want to achieve something like this?
Demo: https://jsfiddle.net/BlackLabel/d09g23xb/

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

michal.f wrote: Wed Jun 22, 2022 5:45 pm Hello,

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

Do you want to achieve something like this?
Demo: https://jsfiddle.net/BlackLabel/d09g23xb/

Let me know if that was what you were looking for!
Best regards!
I have horizontal plot lines with labels. I would like to hide the label if the label text is longer the the line itself. As you can see on the screenshot:
https://ibb.co/2qGhCwv here it's displayed properly, but when I change the date range so the line will be 'shorter' then the text, I would like to hide it

Here should be hidden: https://ibb.co/WkTBNy5
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

Hi,

Could you reproduce this in an online editor that I could work on? It would be easier for me if I knew how you got to this stage.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
laxytt
Posts: 8
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

Hi, sure :) Thank you for fast reply.

I'm not too good at reproducing code in fiddle but did my best:
https://jsfiddle.net/uw8x5Lo6/15/
The short label should be hidden because plot line is shorter then label
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

Hello,

I simplified your demo a bit to what's important here.

You can compare the text size with the series width and only return the text if it fits.
Demo: https://jsfiddle.net/BlackLabel/mzdkg0xe/

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Gantt”