Skip to content
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

lineHeight of xAxis labels is calculated incorrectly if xAxis.labels.style.fontSize is set in rem #9849

Closed
jakub-noga-antsolutions opened this issue Jan 9, 2019 · 5 comments

Comments

@jakub-noga-antsolutions
Copy link

commented Jan 9, 2019

Expected behaviour

LineHeights of xAxis labels should not depend on unit used for xAxis.labels.style.fontSize

Actual behaviour

LineHeight is different if xAxis.labels.style.fontSize is set in rem AND font-size for html element is different than 12px (i.e. 62.5%)

Live demo with steps to reproduce

http://jsfiddle.net/jakub_noga_antsolutions/ywbz3o8x/2/

Product version

Highstock 7.0.1

Affected browser(s)

All supported by Highcharts

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented Jan 10, 2019

Hi @jakub-noga-antsolutions,
Thank you for reporting. It looks like diferent dy position of tspan element. You can convert elements in to HTML by setting the labels.useHTML flag as true.

Demo:

Internal note
@TorsteinHonsi Should we consider it as a bug?

@jakub-noga-antsolutions

This comment has been minimized.

Copy link
Author

commented Jan 10, 2019

Hi @sebastianbochan thanks for response.
Unfortunately setting labels.useHTML to true also changes default white-space to nowrap, at least in our case, but I am not able to reproduce this behaviour on jsFiddle.

I found out that fontMetrics: function (fontSize, elem) treats 'rem' same as 'em'. It checks elements' parent for fontSize and eventually falls back to 16px. Maybe you could change this to proper behaviour?

@TorsteinHonsi

This comment has been minimized.

Copy link
Collaborator

commented Jan 11, 2019

We already have better font size detection for styled mode, so we should probably use that for everything that is not px. @jakub-noga-antsolutions How does this work for you? http://jsfiddle.net/highcharts/vx6g74n9/

@sebastianbochan

This comment has been minimized.

Copy link
Contributor

commented Jan 11, 2019

I fixed the demo (reference to highcharts.local)

@jakub-noga-antsolutions

This comment has been minimized.

Copy link
Author

commented Jan 11, 2019

@TorsteinHonsi Your solution works well for us.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.