Zoom with flags

[Rolle321]

Expected behaviour

The zoom function should not change time scope if zoom is made after a flag on a series.

Actual behaviour

If I have a time series and set out a flag attached to it. The zoom works before the flag but not after the flag in time.

Live demo with steps to reproduce

https://jsfiddle.net/rick822/p64obe01/

1. Make zoom 3 times before the flag on the time series e.g before 12:00. This works fine
2. Make zoom 3 times after the flag on the time series e.g after 12:00. This makes the time scope change. for example, zooming between 13:00-14:00 gives me a zoomed view. Then, zoom between 13:30-13:40 the time suddenly jumps to 14:00 and again zoom makes me end up in 15:00.
3. Add the "flags1" data to the series which adds a flag on the first point in the series and the same behaviour will now apply on points after 08:00.
4. remove all flags "flags1, flags2" and zoom works on the series.

Seems like data after a flag on a series gets a different behaviour than data before a flag. This makes it impossible to examine values on a lower level with zoom if the dataset is much larger than the demo values in my example are.

Might have someting to do with datagrouping, however datagrouping is needed in my real case.

Product version

Highstock JS v10.0.0 (2022-03-07)

Affected browser(s)

Tested in chrome and safari

[karolkolodziej]

Thank you for reporting that bug.
Simplified demo: https://jsfiddle.net/BlackLabel/ogxdsmLa/

As a workaround, you might set the xAxis ordinal: false (uncomment that part from the demo above).

Internal note with some observation

• the issue is replicable with series like flags, scatter, with line series everything works as expected.
• with ordinal disabled works as expected
• selectionMin and selectionMax in the drop are calculated wrong
  

  highcharts/ts/Core/Pointer.ts

  Lines 465 to 471 in 3574f29

  	selectionMin = axis.toValue(
  	(horiz ? x : y) + minPixelPadding
  	),
  	selectionMax = axis.toValue(
  	(horiz ? x + width : y + height) -
  	minPixelPadding
  	);

[dss010101]

FYI..i have tried the work around and while it does solve the issue (in my case a 2nd scatterplot series), it introduces another issue. When zoomed in, i see weekend dates added to the chart (for which i did not provide data), causing gaps when zoomed in.
Example: https://jsfiddle.net/dizzy0ny/3ukcexvh/272/

[rdp1414]

Hello Highcharts Team,

Even we're struggling with this bug for quite some time.
Is it possible to tell us the ETA for this fix?

Thank You,
Rajdeep

[dss010101]

yeah..would definitely like a fix for this

[jrothschild33]

I also encountered this problem. The zoom failed after flag data was added to the line graph. When will this bug be fixed?

[TorsteinHonsi]

Simplified demo with controlled result (click the buttons and watch the console): https://jsfiddle.net/highcharts/4bLo7djx/

[TorsteinHonsi]

Internal note

So far debugging has led me here:

highcharts/ts/Core/Axis/OrdinalAxis.ts

Lines 1412 to 1424 in 07b0713

	// When more series assign to axis, find the smallest one, #15987.
	if (axis.series.length > 1) {
	axis.series.forEach(function (series): void {
	if (
	series.points &&
	defined(series.points[0]) &&
	defined(series.points[0].plotX) &&
	series.points[0].plotX < firstPointX
	) {
	firstPointX = series.points[0].plotX;
	}
	});

In the controlled jsFiddle - when the second series type is scatter, the series.points array is populated and firstPointX is modified. When the second series type is line, the points array is not popular.

I don't yet understand why these series types work differently. The code comes from #15987, maybe @karolkolodziej or @raf18seb knows?

[TorsteinHonsi]

@karolkolodziej I propose this solution, by adding a condition that the firstPointX is not less than the current axis.min. As far as I can see this does not violate #15987.

            // When more series assign to axis, find the smallest one, #15987.
            if (axis.series.length > 1) {
                axis.series.forEach(function (series): void {
                    if (
                        series.points &&
                        defined(series.points[0]) &&
                        defined(series.points[0].plotX) &&
                        series.points[0].plotX < firstPointX &&
                        // #17128
                        series.points[0].plotX >= pick(axis.min, -Infinity)
                    ) {
                        firstPointX = series.points[0].plotX;
                    }
                });
            }

Agreed?