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

Stack Labels in bar chart are misaligned #8187

Closed
jmeyerit opened this Issue Apr 16, 2018 · 7 comments

Comments

Projects
None yet
4 participants
@jmeyerit
Copy link

jmeyerit commented Apr 16, 2018

Greetings, after 6.1.0, stack labels for bar charts are misaligned. The below fiddle demonstrates the issue.
Note: In our application, we are seeing the stack labels pushed down about 3 bars. However, the fiddle shows that the stack labels are moving up slightly. I believe it might be related to spacing calculations for the chart as the misalignment changes depending on the chart height.

Expected behaviour

Stack labels should be aligned to the bar in which they are connected to.

Actual behaviour

Stack labels are not aligned properly, with the alignment difference depending on the height of the chart.

Live demo with steps to reproduce

The fiddle below demonstrates the alignment issue using highcharts version 6.1.0. Changing the version to 6.0.7 or less has the stack labels aligned properly. Change the height of the chart to see the stack bar alignment change.

https://jsfiddle.net/paxd3j6n/9/

Product version

Highcharts >= 6.1.0

Affected browser(s)

Desktop Chrome, iOS Safari, and iOS Chrome. All browsers are likely affected.

@mohaqqani

This comment has been minimized.

Copy link

mohaqqani commented Apr 17, 2018

I am facing similar issue , using this cdn <script src="https://code.highcharts.com/highcharts.js"></script>

@pawelfus

This comment has been minimized.

Copy link
Contributor

pawelfus commented Apr 17, 2018

Hi @jmeyerit and @mohaaqqani

Thanks for reporting the issue!

Just tested with lastest Chrome, these are the results:

  • v6.1.0: screen shot 2018-04-17 at 12 14 59

-v6.0.7: screen shot 2018-04-17 at 12 15 16

I don't see a big difference (maybe 1px, hard to say) - certainly not ~3 bars translation. Decreasing height has the same result - it looks fine. Could you check your demo once again? If you could set fixed height, when translation happens, that would be great.

@jmeyerit

This comment has been minimized.

Copy link
Author

jmeyerit commented Apr 17, 2018

@pawelfus Are you sure you are checking the correct version? The issue only occurs in highcharts 6.1.0. 6.0.0-6.0.7 are all a-okay. In addition, the 3 bars' translation is only prevalent in my application that I'm developing. This fiddle demonstrates closer to what I am seeing in my own application. As you can see, the translation is off, about 2 bars' worth. I'm assuming the various combination of spacing/margins/whatever I'm doing to dynamically calculate the chart height is making the translation worse. It's not due to this algorithm though, since it hasn't had any issue before. Highcharts 6.1.0 is the only version in which this issue persists.

@pawelfus

This comment has been minimized.

Copy link
Contributor

pawelfus commented Apr 17, 2018

@jmeyerit

Yes, I double checked this. My mistake in the post above, fixed versions there (how did I get 6.0.2? it's a mystery..).

Your second demo though is a great example, thanks! Minified demo: https://jsfiddle.net/BlackLabel/paxd3j6n/20/

Internal note:
Regression after 558e667 @ppotaczek

@jmeyerit

This comment has been minimized.

Copy link
Author

jmeyerit commented Apr 17, 2018

Edit: We posted at nearly the same time. XD The below images still represent the issue for quick look over nonetheless!

Using this fiddle, which is the same one I linked in my initial post. I am getting the below results and am using the latest desktop chrome.

400px height with 6.1.0
image
800px height with 6.1.0
image
400px height with 6.0.7
image
800px height with 6.0.7
image

@mohaqqani

This comment has been minimized.

Copy link

mohaqqani commented Apr 17, 2018

I am facing this much difference in stack labels
image

@ppotaczek

This comment has been minimized.

Copy link
Contributor

ppotaczek commented Apr 17, 2018

The temporary workaround is to overwrite 'getStackBox' method:

Highcharts.StackItem.prototype.getStackBox = function(chart, stackItem, x, y, xWidth, h, axis) {
  var reversed = stackItem.axis.reversed,
    inverted = chart.inverted,
    axisPos = axis.height + axis.pos - (inverted ? chart.plotLeft : chart.plotTop),
    neg = (stackItem.isNegative && !reversed) ||
    (!stackItem.isNegative && reversed);

  return {
    x: inverted ? (neg ? y : y - h) : x,
    y: inverted ?
      axisPos - x - xWidth :
      (neg ?
        (axisPos - y - h) :
        axisPos - y
      ),
    width: inverted ? h : xWidth,
    height: inverted ? xWidth : h
  };
}

Live demo: https://jsfiddle.net/BlackLabel/nkpgpymk/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.