songshumax
Posts: 3
Joined: Fri Aug 20, 2021 12:46 am

How to make the label appear on the left side of the column

Please see the example below,this is the result I hope to get.
Now,I did it by changing the x value with fixed value.

But I konw, the width of the column could be change when screem size changed.
I want to change x with a dynamic value.

In my mind , first I set the datalable in right side of colunm.
When I get the width of column, change it to a negative value, and set this negative value to x of datalable,then datalable can move to the correct position.

Can anyone tell me how to implement it , or there are other ways

・Sample URL
https://jsfiddle.net/hr7mu6Lj/
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to make the label appear on the left side of the column

Hello songshumax,

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

Unfortunately, there is no such API property for the dataLabel placement, however you could achieve similar results by iterating over series and points array and updating position for each data label. I have prepared simple demo showing how to place data labels relative to point width. The placement isn't perfect yet, but you got the general idea how to adjust it to your needs.
Demo: https://jsfiddle.net/BlackLabel/nur4xh57/
API reference: https://api.highcharts.com/class-refere ... int#update,
https://api.highcharts.com/highcharts/chart.events.load

Let me know if that was what you were looking for, and feel free to ask any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
songshumax
Posts: 3
Joined: Fri Aug 20, 2021 12:46 am

Re: How to make the label appear on the left side of the column

Hi mateusz.b

Thanks for your replay.
That's a good sample,very helpful to me。
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to make the label appear on the left side of the column

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

Return to “Highcharts Stock”