New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The width style for vertical axis labels appears not to be respected #7028

Closed
matt-hoskins opened this Issue Aug 1, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@matt-hoskins

matt-hoskins commented Aug 1, 2017

Expected behaviour

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.

Actual behaviour

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:

http://jsfiddle.net/8m10utq5/2/

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.

Affected browser(s)

Firefox, Chrome

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!

@matt-hoskins

This comment has been minimized.

Show comment
Hide comment
@matt-hoskins

matt-hoskins Aug 1, 2017

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:
http://jsfiddle.net/8m10utq5/3/

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...

http://api.highcharts.com/highcharts/xAxis.labels.style

"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.

matt-hoskins commented Aug 1, 2017

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:
http://jsfiddle.net/8m10utq5/3/

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...

http://api.highcharts.com/highcharts/xAxis.labels.style

"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.

@matt-hoskins matt-hoskins changed the title from The width style for vertical axis labels is not respected if and whitespace is also set to "nowrap" to The width style for vertical axis labels appears not to be respected Aug 2, 2017

@matt-hoskins

This comment has been minimized.

Show comment
Hide comment
@matt-hoskins

matt-hoskins Aug 2, 2017

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 :).

matt-hoskins commented Aug 2, 2017

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 :).

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Aug 2, 2017

Contributor

Hi,

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).
Demo: http://jsfiddle.net/sferxawy/

Contributor

KacperMadej commented Aug 2, 2017

Hi,

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).
Demo: http://jsfiddle.net/sferxawy/

@KacperMadej KacperMadej added the Bug label Aug 2, 2017

@matt-hoskins

This comment has been minimized.

Show comment
Hide comment
@matt-hoskins

matt-hoskins Aug 2, 2017

Thanks Kacper - thanks for the suggestion of the workaround :). I'd figured out that workaround myself a little while after submitting this issue - and it does indeed do the job with my actual charts and datasets.

matt-hoskins commented Aug 2, 2017

Thanks Kacper - thanks for the suggestion of the workaround :). I'd figured out that workaround myself a little while after submitting this issue - and it does indeed do the job with my actual charts and datasets.

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Aug 4, 2017

Collaborator

@KacperMadej Can you suggest a fix for this issue?

Collaborator

TorsteinHonsi commented Aug 4, 2017

@KacperMadej Can you suggest a fix for this issue?

@KacperMadej KacperMadej self-assigned this Aug 4, 2017

KacperMadej added a commit that referenced this issue Aug 4, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment