Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
The width style for vertical axis labels appears not to be respected #7028
When the label style on the vertical axis is set with both a width and whiteSpace set to "nowrap" I would expect the width to be respected and ellipsis to be shown.
The width style isn't respected when whiteSpace is set to "nowrap" - instead the labels behave as if no width were set (the label area grows). This also affects scatter charts with "inverted" set to true.
Live demo with steps to reproduce
I forked another fiddle with a simple bar chart and just adjusted the label style to demonstrate:
If you remove the whiteSpace style then the labels wrap ok on the vertical axis to respect autosizing of the axis and plot areas - but not the specific size in the width style - if you make the whole chart wider they don't wrap to the size.
Alternatively if you change the chart type to scatter so the label axis is the horizontal one then you get ellipsis - although I still don't think the width is respected.
Note: I've editing this comment as I realise, from a bit more testing, that I thought the sizing was being respected in some circumstances but actually that was just highcharts autosizing of the axis label area applying wrapping.
I guess this may not be a bug if the width style has never been intended to work on axis labels!
On the off-chance I just tried specifically setting the textOverflow style on the labels to "ellipsis" and that made it at least apply ellipsis for autosizing:
I now realise, from the documentation, that the default style on the label doesn't have textOverflow set. However the documentation for style seems to imply that you only need to deliberately set textOverflow to 'none' to prevent ellipsis...
"CSS styles for the label. Use whiteSpace: 'nowrap' to prevent wrapping of category labels. Use textOverflow: 'none' to prevent ellipsis (dots)."
So I guess there is may have been a change in the defaulting behaviour for vertical axis labels and handling overflow - possibly needs the documentation for the axis labels style to make it clear that textOverflow needs setting to "ellipsis" if you want it to use "nowrap" and want ellipsis to appear.
That still doesn't help with the label width style not being respected though, I don't think.
Looking through Axis.js I guess it would be a case of maybe either factoring the label style width into the calculations for getSlotWidth (for vertical axis use the labels style width if set rather than the marginLeft as long as it's not greater than any set marginLeft) or maybe renderUnsquish. I don't know enough about the inner workings of highcharts really to be sure though :).
Thank you for reporting about the problem.
Like you have found already - ellipsis set for textOverflow will help slightly.
Internal note: width on second run of axis labels is wrong, because it's based on slot width and set label is ignored.
As a workaround you could set marginLeft to a required label width + 20 (for chart margin and axis labels padding).