Inconsistent tick alignment

[mateuszkornecki]

Expected behaviour

Tick alignment and amount should be persistent on a certain container width.

Actual behaviour

After resizing the container to the smaller width, and then resizing it back to the initial value the tick amount/positions will be different than on the initial width.

Note: it is not working correctly since the 8.1.1 version

Live demo with steps to reproduce

Steps:
0/ Remember the actual tick positions/amount
1/ Click on the "275" button
2/ Click on the "900" button
3/ Note that ticks are different than before resizing

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

Product version

8.1.1 and above

Affected browser(s)

All

[mateuszkornecki]

8.2.0

BEFORE:

AFTER:

8.1.0

BEFORE:

AFTER:

[pawelfus]

Bisected to commit 57ce06e

PS: I'm not sure if this is really a bug. Just a standard use-case where initial tickPositions are different from every subsequent redraw. What do you think @TorsteinHonsi ?

[TorsteinHonsi]

It's not a bug. Highcharts approximates the tick pixel interval between redraws, so it may not be exactly the same on initial load and after a redraw.

[ori007a]

@TorsteinHonsi but this is only from version 8.1.1 - before it's works great!
How can we solve this?

[TorsteinHonsi]

Actually since v9.0 it works again like it did in v8.1.0: https://jsfiddle.net/BlackLabel/jazvkhcm/

[ori007a]

@TorsteinHonsi
on resize it still have the bug.
check out this gif (left axis) before resize max value is 30. after resize and back to normal size, max value is 32.

can you advive?
using HC 9.0.1 version.

[KacperMadej]

@ori007a
Could you add a live demo for this case working correctly in any older code version?
I tried to recreate this problem in the current version (v9.0.1) and was successful - https://jsfiddle.net/BlackLabel/jazvkhcm/1/
However, I tested v8.1.0 and it works the same - https://jsfiddle.net/BlackLabel/jazvkhcm/2/
Steps: click buttons in order 275, 900

[ori007a]

In my browser both versions works as expected.
It's should be on resize and not reflow.
I'm not sure what problem do you see in your browser. can you show me?

[KacperMadej]

The inner yAxis starts with max as 30 and changes for good to 32 after the first reflow.

Tested on Windows 10 with

• Chrome v88
• Firefox v86
• Edge v89
• Opera v74

@ori007a You could try changing the height of the chart by a few pixels until the problem will show - that is how I recreated it. What's your OS and browser?

[ori007a]

@KacperMadej
I succeed to recreate it. with change the sizes little bit.
Here:
https://jsfiddle.net/m2h9spn8/
I used mac os Catalina with Chrome Version 89.0.4389.72

can you solve this?

[ori007a]

@KacperMadej ?

[KacperMadej]

Right, sorry about the delay.

this is only from version 8.1.1 - before it's works great!

I am unable to resolve the problem through v8.1.1 - are you, @ori007a ?

It looks like when there is no need then the axis scale is not changed.
The initial render is different than the one with a small width because the available space is different.
When going back to the initial width the change of space is not significant enough to cause different ticks layout.
As a workaround, it could be forced by an update that will force the change: https://jsfiddle.net/BlackLabel/wzcvsed3/

If the used small size is closer to the initial width then the problem is not recreated. This might be so because the demo doesn't recreate your problem fully.

If there are chart widths that you need to support differently you could use responsive option. Otherwise to ensure a consistent tick layout you could set tickPositioner with a more strict function than the one used by default.