Sandesha
Posts: 3
Joined: Thu May 19, 2022 9:56 am

Higchart x-axis plot band label

Hi,

I have Higchart x-axis plot band and I have added Label for the same.

but when the label is more bigger than the plot width I want to wrap the word in the next line. I tried with word-wrap but that does't help.

I have attached the screenshot for the same.

Please help me out with this.


Regards
Sandesha Patali
Attachments
Image
Image
highChartPlotBandLabel.PNG (26.73 KiB) Viewed 179 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Higchart x-axis plot band label

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

This is a feature, which cannot be created directly from API, but you can make it with some custom code. I have prepared a simple demo for you by adding a <br> tag between text from label depending on the plotBand width. I have added a logic also to chart.events.render to make it responsive.

Demo: https://jsfiddle.net/BlackLabel/58rpt3Lg/
API Reference: https://api.highcharts.com/highcharts/c ... nts.render
https://api.highcharts.com/class-refere ... xis#update

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer
Sandesha
Posts: 3
Joined: Thu May 19, 2022 9:56 am

Re: Higchart x-axis plot band label

Thank you for the answer.

But Unfortunately If I add Formatter to the label it is giving me error saying not know property.

"highcharts": "9.3.2",
"highcharts-angular": "3.0.0",

This is the version I am using now. Should I need to update to newer versions to get formatter in the Label.

Thanks in advance
Sandesha Patali
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Higchart x-axis plot band label

Hello Sandesha Patali!
I have prepared a demo for you using angular with TS. Let me know if that is good for you.

Demo: https://stackblitz.com/edit/highcharts- ... ine-wqmr2x

I also suggest you upgrade your project to the latest version of Highcharts which is Highcharts v10.1.0 https://www.highcharts.com/blog/changel ... ts-v10.1.0

Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”