Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Stack Labels in bar chart are misaligned #8187
Greetings, after 6.1.0, stack labels for bar charts are misaligned. The below fiddle demonstrates the issue.
Stack labels should be aligned to the bar in which they are connected to.
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.
Highcharts >= 6.1.0
Desktop Chrome, iOS Safari, and iOS Chrome. All browsers are likely affected.
Hi @jmeyerit and @mohaaqqani
Thanks for reporting the issue!
Just tested with lastest Chrome, these are the results:
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.
@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.
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.
The temporary workaround is to overwrite 'getStackBox' method:
Live demo: https://jsfiddle.net/BlackLabel/nkpgpymk/