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

Data labels rotation overlap bug #7362

Closed
yaroslavkorzh opened this Issue Nov 6, 2017 · 7 comments

Comments

Projects
None yet
4 participants
@yaroslavkorzh

yaroslavkorzh commented Nov 6, 2017

Expected behaviour

As in rotation set to 0 overlapping labels should be hidden
screenshot 827

Actual behaviour

When you use rotation different from 0, data labels will overlap
screenshot 826

Live demo with steps to reproduce

  1. Create any chart with big amount of points where points are close.
  2. On created chart enable data labels with rotation = 0, check that overlapping labels aare hidden
  3. Change rotation to 270 degrees
    To check the steps you can use demo fiddle - changing rotation there shows issue.
    http://jsfiddle.net/yako/6urguckf/4/
    Seems like logic that calculates labels overlap misses when label is rotated.

Affected browser(s)

All browsers

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Nov 7, 2017

Thank you for reporting!

@pawelfus pawelfus added the Bug label Nov 7, 2017

@skuske

This comment has been minimized.

skuske commented Feb 5, 2018

Any update on this (i.e. when this will be fixed?) Rotation is pretty useless unless this is fixed. Three months since this has been reported...

@skuske

This comment has been minimized.

skuske commented Feb 28, 2018

Any update, pleeeeeease!

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Mar 1, 2018

Hi @skuske

We don't have ETA for this issue. I added a workaround for this issue. Note: it may cause some performance issues with huge datasets.

Workaround:
Demo: http://jsfiddle.net/6urguckf/24/

Plugin:

(function(H) {
  H.wrap(H.Chart.prototype, 'hideOverlappingLabels', function(p, labels) {
    var bbox;
    for (var i = 0; i < labels.length; i++) {
      bbox = labels[i].element.getBBox();
      labels[i].placed = true;
      labels[i].alignAttr = {
        x: bbox.x,
        y: bbox.y
      };
    }
    p.apply(this, Array.prototype.slice.call(arguments, 1));
  });
})(Highcharts);

Internal note:
It looks like rotated labels don't set placed and alignAttr params.

@skuske

This comment has been minimized.

skuske commented Mar 2, 2018

Thanks. How can I use that in the iOS Wrapper?

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Mar 2, 2018

Unfortunately, this workaround can not be used in iOS wrapper. For iOS wrapper we need to use events, demo for you: http://jsfiddle.net/6urguckf/35/

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Mar 7, 2018

@pawelfus Will you prepare a PR with the fix?

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