PJO
Posts: 10
Joined: Fri May 14, 2021 1:58 am

Highcharts updated to version 9..2.2 - Heatmaps xaxis label coming inside the chart

Hi,

I recently updated my Highcharts version to 9.2.2 and I am using the styled mode.

Currently I am struggling with an issue regarding heatmap axis label, which when long, its coming inside the chart. I have created a jsfiddle showing the issue and I have the similar set up.

https://jsfiddle.net/po3s4fL5/

Can you please help me here and please let me know what I am missing?

Thank you!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts updated to version 9..2.2 - Heatmaps xaxis label coming inside the chart

Hello PJO,

Thanks for contacting us with your question.

Could you provide me with more details what would you like the labels to behave? Should they be repositioned or crop?

Thanks in advance for clarification.
Best regards!
Mateusz Bernacik
Highcharts Developer
PJO
Posts: 10
Joined: Fri May 14, 2021 1:58 am

Re: Highcharts updated to version 9..2.2 - Heatmaps xaxis label coming inside the chart

Hello Mateusz.b,

Thank you for getting back to me.

I want them to be repositioned and should be able to show the full text (it can go to multiple lines) but spaced above the graph. I have the horizontal scroll bar enabled so that the width of the chart is not restricted.

It should be almost the same way as shown in the fiddle, but the label shouldn't be coming inside the chart, it should be spaced above the graph. The column width and the whole graph width can be increased based on the length of the label.

Thanks in advance!

Kind regards!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Highcharts updated to version 9..2.2 - Heatmaps xaxis label coming inside the chart

Hello PJO,

Sorry for slightly longer response time.

Just want to ask you one more question. Have you noticed that fixed rotation on axis labels in your code? Without that options labels rotate automatically so that they do not overlap with other elements:
https://jsfiddle.net/BlackLabel/9vhm4yz3/

If that's on purpose and you simply do not want rotated labels then calculating minimum chart width based on labels width is most likely the only option, but unless you really don't want rotatet labels I would suggest use rotation as it is much more consistent and less prone to error.

Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”