[Bug] Transition missing when using filterMode "none" in dataZoom

[dsine-de]

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/xhzv2x

Steps to Reproduce

In the reproduction example link, the chart is alternating between 3 zoom states every 2 seconds.

Current Behavior

Depending on the chart size inside the browser window, the transition of the chart between the setOption() updates is sometimes missing. On small browser window sizes, or when using a different filterMode (not none), the transition is working. When the viewport is enlarged, the transition stops working for the smallest zoom area.

When the preview panel is resized so the canvas width is 884 px, the transition does not work when switching to the highest zoom level. If the preview panel is resized so the canvas has 892 px, the transition stops working.

Expected Behavior

The transition should work on any zoom levels, independent of the rendered size or the used filterMode.

Environment

- OS: Windows 11
- Browser: MS Edge 130.0.2849.80 
- Framework: none

Any additional comments?

No response

[helgasoft]

Frankly I do not understand what you mean by "transition". API has only universalTransition which does not apply since there is no second line here. [This Demo](), based on your example, works correctly with or without filter:'none' and for any horizontal chart size.

[dsine-de]

I mean the animation of the line that happens when changing the zoom level programmatically. The first two changes of the zoom level in the following screen recording have a transition/animation, but the third change is instant:

When the filterMode option is left at its default, the transition between zoom levels always has the correct animation. As far as I can tell this should not have anything to do with the UniversalTransition feature.

Seems your demo link is wrong (it links to this issue).

[helgasoft]

ok, so this is about line animation.

screen recording have a transition/animation, but the third change is instant

On the screen recording it's instant, but in your code example it is not. Please add animationDurationUpdate:2000 to option and confirm that all three animation times are equal.

OTOH the third X-axis labels animation could be considered "instant" and I don't know if that's fixable.

[dsine-de]

Here is another recording, the three changes of zoom level are animated. Then I resize the preview panel so the chart gets wider. The next 2 changes then are also animated, but the third one (the highest zoom level) suddenly has no animation. So it seems to be dependent on the amount of samples that fit into the zoom window or something.

I tested this in Firefox and Edge.

The animationDurationUpdate option doesn't change that behaviour.

[dsine-de]

BTW the axis labels seem to be animated correctly when this happens, only the line is being changed instantly.

[helgasoft]

I see and understand the effect in recorded image, but cannot replicate it in code. Demo works as expected - equal animation time regardless of zoom level or chart width.

EDIT: aah, I can confirm it in Firefox/Edge, was testing with Chrome only, sorry. So the bug is browser specific.

[dsine-de]

It's also appearing on Chrome Version 130.0.6723.117, see this recording:

[helgasoft]

I admit to not paying attention to the width you mentioned. I was stretching the chart but not enough. Your findings are correct - there is a bug present in all browsers, Chrome included.