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

Data labels rotation overlap bug #7362

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

Data labels rotation overlap bug #7362

yaroslavkorzh opened this issue Nov 6, 2017 · 7 comments
Assignees
Labels
Milestone

Comments

@yaroslavkorzh
Copy link

@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
Copy link
Contributor

@pawelfus pawelfus commented Nov 7, 2017

Thank you for reporting!

@pawelfus pawelfus added the Type: Bug label Nov 7, 2017
@skuske
Copy link

@skuske 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
Copy link

@skuske skuske commented Feb 28, 2018

Any update, pleeeeeease!

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link

@skuske skuske commented Mar 2, 2018

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

@pawelfus
Copy link
Contributor

@pawelfus 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
Copy link
Collaborator

@TorsteinHonsi 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants