xAxis labels break word

[marihemori]

Hello there.

I need help with the words that are on the labels. They end up hiding depending on the size of the graph or something like that.
(I'm having some problems with the mobile sizes )

I tried to use some attributes in the style like "wordBreak: 'break-all'" but I still didn't succeed...

If you can help me I would be very grateful.

[jedrzej.r]

Hi!

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

I've tried to reproduce this issue with a simple bar chart, but to no avail. Could you please update below demo with your config, so I can investigate it further?

Live demo: https://jsfiddle.net/BlackLabel/6ur3k0ws/

I'm waiting for your reply.
Best regards!

[marihemori]

Basically I'm having problems with smaller screen sizes and the labels end up not breaking. I updated the demo.

https://jsfiddle.net/hbdf3u04/

[jedrzej.r]

Hi!

Indeed, when the chart width gets significantly small and xAxis labels don't have enough space to wrap, the text gets truncated to fit. It happens because of a fixed chart height, which is by default set to 400px and doesn't expand automatticaly. In order to override this behaviour, you can set whiteSpace: 'nowrap' in labels.style property, but it will end up shrinking plot area. Other way would be to update chart height by setting responsive.rules with a maxWidth condition.

First approach: https://jsfiddle.net/BlackLabel/oeyd41km/

Second approach: https://jsfiddle.net/BlackLabel/ymwhjpor/

References:
https://developer.mozilla.org/en-US/doc ... hite-space
https://api.highcharts.com/highcharts/responsive.rules
https://api.highcharts.com/class-refere ... whiteSpace

Let me know which solution suits your needs.
Best regards!

[marihemori]

Thank you! I think that fixed it for now.

I ended up using the height solution.

[jedrzej.r]

I'm really glad to hear that!

In case of any other questions, feel free to ask anytime.
Best regards!