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

Column chart labels overlap bars after drilldown #8042

Closed
marklofdahl opened this Issue Mar 19, 2018 · 5 comments

Comments

Projects
None yet
3 participants
@marklofdahl

marklofdahl commented Mar 19, 2018

Expected behaviour

On column chart, vertical position of labels should be consistent, and not overlap bars.

Actual behaviour

The vertical position of the labels is a bit quirky. Sometimes they are positioned correctly. Most of the time after a drilldown/drillup, they are too high, and overlap the bars, or too low. If you use the scrollbar at all, the labels will redraw into the correct position.
Is there a way to get the labels to render in the correct position without having to move the scrollbar?

Live demo with steps to reproduce

https://jsfiddle.net/marklofdahl/d3omtjys/

Product version

Highstock 6.0.7

Affected browser(s)

Firefox
Chrome

@Denyllon Denyllon self-assigned this Mar 20, 2018

@Denyllon Denyllon added the Bug label Mar 20, 2018

@Denyllon

This comment has been minimized.

Contributor

Denyllon commented Mar 21, 2018

Thank you for reporting the issue. At the time, there are a couple of changes on the master branch, and it solves some problems with aligning labels too. You can use the latest version from our repository by changing the script source to https://github.highcharts.com/stock/highstock.js for example.
After that, your chart should look better. However, it isn't all what you need to do in order to avoid problem. You could also use the simple workaround to force wrapping of the axis labels. To do that, you need to call redraw() function inside chart.load()event function, just like that:

chart: {
  events: {
    load: function() {
      this.redraw()
    }
  }
}

Live example:
https://jsfiddle.net/afebz7u0/

@marklofdahl

This comment has been minimized.

marklofdahl commented Mar 21, 2018

Thanks for the workaround; it is helpful. Any idea when this will make it into the next official version?

@Denyllon

This comment has been minimized.

Contributor

Denyllon commented Mar 23, 2018

At the time we don't have any specific date of publishing new release, but we should do this within a few weeks.

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented Mar 26, 2018

Closing since the problem is resolved in the next release candidate version of code. Please reopen if the problem will show up in a next version.

@Denyllon

This comment has been minimized.

Contributor

Denyllon commented Mar 27, 2018

Sorry for my understatement. I meant that a lot of issues related to your request will be fixed in upcoming release, but at the time still there are some problems with aligning axis labels and my workaround doesn't solve all of them unfortunately, so I reopen this issue and work on complete solution.

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