Max Width Labels / Chart Area

[Leah]

I have one chart config that receives different data as shown below.

I'd like to enforce a max width on the x axis labels ( the chart is inverted ) I can find options to set a specific width, but I'd just like to set a max width, if all the x axis labels are very short it shouldn't have a massive white space, but if they are all really long it should wrap them and limit it to say 200px wide.

I'm not sure if this is an axis option, or an option for the chart area?

Thanks

[hubert.k]

Hi Leah!
Thanks for contacting us with your question!

To achieve a text wrapping inside labels with a static width all you need to add to your xAxis configuration object is:

Code: Select all

labels: {
    useHTML: true,
    allowOverlap: true,
    style: {
        wordBreak: 'break-all',
        textOverflow: 'allow',
        width: 100
    }
}

Demo: https://jsfiddle.net/BlackLabel/z1oten3y/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels

Let me know if that was what you were looking for.
Regards!

[Leah]

Thanks for the reply, I do not want to have a static width, I want to just set a maximum width, is this possible?

[hubert.k]

Leah,
Actually, if you set CSS styles, like in the demo in my previous post, the width property will act like a max-width. You can see, that if you set a short label, it will be short, and if the label will be long it will break into lines.

Demo: https://jsfiddle.net/BlackLabel/sm62xhLv/

Regards!

[Leah]

Perfect, thank you

[hubert.k]

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