Plot-background and x/y axis groups are misaligned for column series

[MarkusBarstad]

Expected behaviour

plotBorder should encapsulate all gridLines by default.

Actual behaviour

For column series, when one creates a plotBorder, a gridLine outside of plot space can be seen. This does, however, only appear in utils, not in jsfiddle (there it does not appear in the DOM either)

For the yAxis it appears by default,
for the xAxis it only appears when pointPlacement is set.

From looking at the values in the DOM it seems like minPointOffset or minPixelPadding should apply somewhere,
and it seems like x and y axis groups are not positioned correctly compared to plotBackground.

Live demo with steps to reproduce

https://jsfiddle.net/mkb93/qm1v4nxu/

Product version

Highcharts 11.2

Affected browser(s)

Chromium-based, Firefox, maybe more

[karolkolodziej]

@MarkusBarstad you are saying that if the plotBorder is declared, the axis should move left- demo?

[TorsteinHonsi]

@MarkusBarstad I don't see any of the described issues in the live demo... 🤔

Here's a live demo of a stray grid line and tick mark outside the plot area, which should not happen: https://jsfiddle.net/highcharts/gnkrzptq/

For the y-axis, I am not able to reproduce it.

This does, however, only appear in utils, not in jsfiddle

That may indicate it is a pre-release regression. In that case you can try loading the local Highcharts into jsFiddle. Otherwise you should check the width of the chart or other things that affect the layout. Or share a screenshot. We need to see it in order to believe it 😅 .

[MarkusBarstad]

Sorry about the shoddy demo, guys, "was a bit quick on the trigger" and wrong about the xAxis 😆

The xAxis issue seem to arise when each member of a column or column-derived series' data array has an array for each point instead of a primitive, demo here: https://jsfiddle.net/mkb93/d7t9La0f/

@TorsteinHonsi Here is a screenshot of the yAxis bug for the column series;

@karolkolodziej I am basically trying to work the bug you found from this issue, and in the demo posted above the plotBorder rather, looks shifted to the left.

In your original demo it might look like we need to push the gridLine into the plot area but if we do so we actually end up with a superfluous gridLine 😅

[karolkolodziej]

So maybe under this issue let's concentrate on what @TorsteinHonsi pointed out.

Here's a live demo of a stray grid line and tick mark outside the plot area, which should not happen: https://jsfiddle.net/highcharts/gnkrzptq/