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

Comments

Projects
None yet
2 participants
@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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus May 9, 2017

Contributor

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.

Contributor

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.

@pawelfus pawelfus added the Bug label May 9, 2017

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