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

Data labels should hide when bar width is small

Wed Sep 02, 2020 9:38 am

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: 891
Joined: Mon Mar 02, 2020 10:11 am

Re: Data labels should hide when bar width is small

Wed Sep 02, 2020 1:41 pm

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: 5
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

Wed Jun 22, 2022 2:31 pm

How can I achieve that on series type: 'line' ?

User avatar
michal.f
Posts: 536
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

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!
Michał Filipiec
Highcharts Developer

laxytt
Posts: 5
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

Thu Jun 23, 2022 1:32 pm

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

User avatar
michal.f
Posts: 536
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

Thu Jun 23, 2022 2:42 pm

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

laxytt
Posts: 5
Joined: Wed Jun 22, 2022 2:29 pm

Re: Data labels should hide when bar width is small

Thu Jun 23, 2022 4:07 pm

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

User avatar
michal.f
Posts: 536
Joined: Thu Aug 12, 2021 12:04 pm

Re: Data labels should hide when bar width is small

Fri Jun 24, 2022 2:23 pm

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

Return to “Highcharts Gantt”