drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Centering axis labels in time range individually

The following topic has a solution to translate axis labels so that they are centered in the time range:

viewtopic.php?p=149034&sid=e4e7e13c44d4 ... 5d#p149034

But this translates the entire labelGroup by the same amount. I have ticks that are not necessarily equally spaced, so I need to translate each label individually, and my solution for this is:

https://jsfiddle.net/8cmr1gzx/

BUT now I want to use html labels and have useHTML set to true... but this breaks my centering code:

https://jsfiddle.net/0jed7z5w/

All I have done in the above is set useHTML set to true... but the labels are now centered on the tick, not in the time range. So tick.label.translate() doesn't work for HTML labels?

How do I make this work for HTML labels, translating each label by its own amount.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Centering axis labels in time range individually

Hello drmrbrewer!
Thanks for contacting us with your question!

You can position your labels by adding a margin-left using CSS on each label - it will work same as translate method.

Demo: https://jsfiddle.net/BlackLabel/5bw7tpe2/

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer
drmrbrewer
Posts: 248
Joined: Sat Sep 06, 2014 6:39 pm

Re: Centering axis labels in time range individually

Very clever, thanks so much!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Centering axis labels in time range individually

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”