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

Polar chart axis label does not respect `nowrap` #5689

Closed
PowerKiKi opened this Issue Sep 15, 2016 · 8 comments

Comments

Projects
None yet
3 participants
@PowerKiKi

PowerKiKi commented Sep 15, 2016

In a polar chart with very long axis labels, I would like to control line wrapping myself, instead of default Highcharts behavior. To do so, I configure the chart with "xAxis.labels.style.whiteSpace": "nowrap" as documented here. And my category names include <br> tags as described there.

Expected behaviour

So I expect Highcharts to render labels in SVG (not HTML) while respecting my <br> tags and not introducing any other line breaks. In the JSFiddle below, that means exactly three lines, similar to:

first first first first first first first
second second second
third third third third

Actual behaviour

But instead, the first <br> seems to be respected but then it seems to switch to default line breaking behavior introducing break lines wherever Highcharts sees fit. So I get something like:

first first first first first first first
second
second second
third third third third

It seems there is two wrong things. First according to my understanding of the docs, Highcharts should never introduce a line break when nowrap is specified. And second, even if it had to introduce line break, then it seems the one introduced is wrong as there is no reason to break the line after the first second, and not after the the second second (or the first third for that matter).

Removing "polar": true, works as expected. And removing the <br> tags will render as one single very long line as expected. Removing the nowrap is not really an option since it's the default behavior that we wanted to avoid in the first place.

Live demo with steps to reproduce

http://jsfiddle.net/5m9817tx/1/

Affected browser(s)

Chrome, Firefox (and most likely all others)

@oysteinmoseng oysteinmoseng added the Bug label Sep 15, 2016

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Sep 15, 2016

Collaborator

Thank you for reporting, we'll look into this as soon as possible.

Collaborator

oysteinmoseng commented Sep 15, 2016

Thank you for reporting, we'll look into this as soon as possible.

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Sep 15, 2016

Contributor

It looks like default options for radial xAxis and standard xAxis are different: xAxis.labels.style.textOverflow is not by default set to "ellipsis".

In other words, to get the same result simply setting textOverflow do the thing: http://jsfiddle.net/5m9817tx/3/ (Note that disabling textOverflow for a classic chart outputs the same result: http://jsfiddle.net/5m9817tx/5/ )

Contributor

pawelfus commented Sep 15, 2016

It looks like default options for radial xAxis and standard xAxis are different: xAxis.labels.style.textOverflow is not by default set to "ellipsis".

In other words, to get the same result simply setting textOverflow do the thing: http://jsfiddle.net/5m9817tx/3/ (Note that disabling textOverflow for a classic chart outputs the same result: http://jsfiddle.net/5m9817tx/5/ )

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng

oysteinmoseng Sep 15, 2016

Collaborator

Should we set textOverflow to ellipsis by default, or is this by design for some reason?

Collaborator

oysteinmoseng commented Sep 15, 2016

Should we set textOverflow to ellipsis by default, or is this by design for some reason?

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Sep 15, 2016

Contributor

That's a good question. As I know, textOverflow: "ellipsis" was added after polar extension, so maybe it's just the option is missing?

Contributor

pawelfus commented Sep 15, 2016

That's a good question. As I know, textOverflow: "ellipsis" was added after polar extension, so maybe it's just the option is missing?

@oysteinmoseng

This comment has been minimized.

Show comment
Hide comment
@oysteinmoseng
Collaborator

oysteinmoseng commented Sep 15, 2016

@PowerKiKi

This comment has been minimized.

Show comment
Hide comment
@PowerKiKi

PowerKiKi Sep 16, 2016

Thanks for your quick replies. I think the fixed applied is a good thing, but it does not really address the original issue. If we take into account what you said, then I'd say that when both options are used ("style": {"whiteSpace": "nowrap", "textOverflow": "none"}), then the expected results still should be:

first first first first first first first
second second second
third third third third

But the actual result didn't change and is still:

first first first first first first first
second
second second
third third third third

Why line breaks where introduced when I specifically asked to do nothing at all ?

Maybe if I had a way to specify the width of the labels, I could workaround this bug. But I am not aware of any way to increase the labels width. Is there any ?

PowerKiKi commented Sep 16, 2016

Thanks for your quick replies. I think the fixed applied is a good thing, but it does not really address the original issue. If we take into account what you said, then I'd say that when both options are used ("style": {"whiteSpace": "nowrap", "textOverflow": "none"}), then the expected results still should be:

first first first first first first first
second second second
third third third third

But the actual result didn't change and is still:

first first first first first first first
second
second second
third third third third

Why line breaks where introduced when I specifically asked to do nothing at all ?

Maybe if I had a way to specify the width of the labels, I could workaround this bug. But I am not aware of any way to increase the labels width. Is there any ?

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Sep 16, 2016

Contributor

You can use fixed version of Highcharts (master branch), please take a look: http://jsfiddle.net/5m9817tx/6/ It renders labels as you expect. It will be part of the next release.

Contributor

pawelfus commented Sep 16, 2016

You can use fixed version of Highcharts (master branch), please take a look: http://jsfiddle.net/5m9817tx/6/ It renders labels as you expect. It will be part of the next release.

@PowerKiKi

This comment has been minimized.

Show comment
Hide comment
@PowerKiKi

PowerKiKi Sep 16, 2016

Great, thank you!

PowerKiKi commented Sep 16, 2016

Great, thank you!

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