coltcarnevale
Posts: 5
Joined: Mon Jan 28, 2019 4:00 pm

How can I position the first label to align right and all other align left

So my chart consists of adding and removing financial data, and the x-axis displays the numerical value for each of the items for each year. The first label contains 2 things in order from left to right:
1. The abbreviated name of the field with a color key
2. The value for the first year

The last label also contains 2 items in order from left to right:
1. The data value for the last year
2. the CAGR (compound annual growth rate) for the entire timeframe

The labels in between the first and last only display the data value for that given year.

Currently, all labels are aligned left, and this works well for everything except for the first label. Only small amounts of years, the first label is legible and doesn't overlap with any other data, but as the graph expands to plot more years then the first label overlays on top of the other labels. My thought process for fixing this would be to align the first label to the right and have everything else aligned left.

How would I go about changing the alignment of the first label only? Is there a better option to fix this scenario?

Small amount of data to show div elements
https://imgur.com/FyKq7vH

Larger amount of data to show overlap issue
https://imgur.com/a/jG912PJ
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: How can I position the first label to align right and all other align left

Hello,

Thanks for contacting us with your question!

It is hard to tell you what is not working and what could be done without taking look at your code because I don't know how exactly you create this label. Could you provide me simplified live demo showing your issue? You can start based on this: https://jsfiddle.net/BlackLabel/Lcf36abd/

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”