Chart changes y axis grid lines min max , after updating a point/serie or redraw

[dragoshzava]

Expected behaviour

Should not change the min/max of the grid line.

Actual behaviour

Changes after update a series or point.

Live demo with steps to reproduce

https://jsfiddle.net/Resems/2q61jt97/2/

Open
Click update point

Product version

Latest

Affected browser(s)

All

Attached Video

Spline.with.symbols.-.JSFiddle.-.Code.Playground.2.webm

Additional Comment

It happens on both redraw, and both on series.update, and only on specific chart sizes.
We use redraw, after the end user changes the configuration of the chart, and the grid lines changes, which is unexpected result for an end user as the data did not change.
Any work around?

[bm64]

Hello @dragoshzava, thanks for reporting the issue.

The issue appears to have started with v11.0.0. It works as expected in v10.3.3: https://jsfiddle.net/BlackLabel/dx6eLb8c/

I can't provide a workaround at the moment. Additionally, series.update and chart.redraw behave differently based on the config. For example, in this case, only series.update alters the axis ticks: https://jsfiddle.net/BlackLabel/woukzn73/

[hubertkozik]

Internal note:
This issue is caused by autorotating the x-axis labels, which cannot be simply calculated before the actual rendering of labels and checking space for them. This issue is not fixed by this Pull Request.

[hubertkozik]

This issue is not regression, in v10.3.3 the styles of the chart were different and the issue was not reproduced.
Latest release with old styles: https://jsfiddle.net/BlackLabel/tqzrympx/

[TorsteinHonsi]

Agree with Hubert, it is not a regression, and this behaviour is well known. We have traditionally rejected it as not a bug, allthough #19896 fixed most cases. In the API for tickPixelInterval we state that it defines the approximate pixel distance between ticks. That's what comes to play here.

As explained in the referenced PR, the problem is that the x-axis labels affects the y-axis tick amound, affecting the y-axis labels, which again changes the length of the x-axis, affecting its tick amount, again affecting its labels etc. In the Chart.render function we allow two iterations of this to find a good-enough match.

It is possible to more repetitions, but it comes at a cost. For each iteration of finding the perfect axis padding, label elements must be added to the DOM and measured. So it may potentially decrease performance, at least on complex charts. What we could do is to add this code though and hide it behind an option, so the implementer need to actively allow multiple runs. That would not change the default behaviour, but would allow us an easy way out when this question/issue pops up.

With the following patch applied to c8d9ea3 it works as expected with the OP demo. If we take this further, the overheatProtector would be called something serious and made into an option and default to 1.

diff --git a/ts/Core/Chart/Chart.ts b/ts/Core/Chart/Chart.ts
index 76453af935..6ac466f0d9 100644
--- a/ts/Core/Chart/Chart.ts
+++ b/ts/Core/Chart/Chart.ts
@@ -2397,9 +2397,6 @@ class Chart {
         chart.getMargins(true);
         chart.setChartSize();
 
-        // Record preliminary dimensions for later comparison
-        const tempWidth = chart.plotWidth;
-
         for (const axis of axes) {
             const { options } = axis,
                 { labels } = options;
@@ -2441,7 +2438,9 @@ class Chart {
 
         // Use Math.max to prevent negative plotHeight
         chart.plotHeight = Math.max(chart.plotHeight - expectedSpace, 0);
-        const tempHeight = chart.plotHeight;
+
+        let tempWidth = chart.plotWidth,
+            tempHeight = chart.plotHeight;
 
         // Get margins by pre-rendering axes
         axes.forEach((axis): void => axis.setScale());
@@ -2449,13 +2448,14 @@ class Chart {
 
         // If the plot area size has changed significantly, calculate tick
         // positions again
-        const redoHorizontal = tempWidth / chart.plotWidth > 1.1,
-            // Height is more sensitive, use lower threshold
-            redoVertical = tempHeight / chart.plotHeight > 1.05;
-
-        if (redoHorizontal || redoVertical) {
-
-            axes.forEach((axis): void => {
+        let redoHorizontal = tempWidth !== chart.plotWidth,
+            redoVertical = tempHeight !== chart.plotHeight,
+            overheatProtector = 0;
+        while ((redoHorizontal || redoVertical) && overheatProtector < 9) {
+
+            tempWidth = chart.plotWidth;
+            tempHeight = chart.plotHeight;
+            for (const axis of axes) {
                 if (
                     (axis.horiz && redoHorizontal) ||
                     (!axis.horiz && redoVertical)
@@ -2463,8 +2463,12 @@ class Chart {
                     // Update to reflect the new margins
                     axis.setTickInterval(true);
                 }
-            });
+            }
             chart.getMargins(); // Second pass to check for new labels
+
+            redoHorizontal = tempWidth !== chart.plotWidth;
+            redoVertical = tempHeight !== chart.plotHeight;
+            overheatProtector++;
         }
 
         // Draw the borders and backgrounds