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

Axis labels are not positioned correctly when using large font sizes #6700

Closed
andiger opened this issue May 8, 2017 · 1 comment
Closed

Axis labels are not positioned correctly when using large font sizes #6700

andiger opened this issue May 8, 2017 · 1 comment
Labels

Comments

@andiger
Copy link

@andiger andiger commented May 8, 2017

Expected behaviour

The x-axis labels should be positioned under the plot area.
The y-axis labels should be aligned with the y-values of the plot area.

Actual behaviour

The x-axis labels intersects the plot area.
The y-axis labels are not aligned with the values of the plot area. See for example the first data point in the provided fiddle-demo, it has the value 5 but visually it is closer to the '2.5' label.

Live demo with steps to reproduce

http://jsfiddle.net/adgadg/dnzvpkxb/9/

If I change the first y-value from 5 to 0 the labels seems to be positioned correctly.
If I remove both dates from the data array (leaving only one array with the two y-values) then the x-axis labels are positioned correctly. In all cases the x-axis labels 'area' seems to be calculated correctly (ie. the correct amount of space is reserved) but the labels are not placed inside it.

Affected browser(s)

Tested on Highcharts 5.0.10, Firefox 53

@pawelfus
Copy link
Contributor

@pawelfus pawelfus commented May 9, 2017

Thank you for reporting this issue!

Workaround:
Demo: http://jsfiddle.net/dnzvpkxb/12/

(function(H) {
  H.wrap(H.Axis.prototype, 'labelMetrics', function(proceed) {
    var index = this.tickPositions && this.tickPositions[0] || 0;
    return this.chart.renderer.fontMetrics(
      this.options.labels.style && this.options.labels.style.fontSize,
      this.ticks[index] && this.ticks[index].label
    );
  })
})(Highcharts);

Internal note:
We can not assume in labelMetrics that this.ticks[0] will always be defined.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.