Animation glitching when changing scale min and max

[heavyStuff3000]

Expected behavior

I am using the min max scale for the time axis chart: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#min-max-configuration

Because I need to 'change page' because I have too much data and I use the scale to get from one point of the graph to the next.

my project is really starting to look good and work very well, but unfortunately for me I stumbled across that small visual 'glitch' I have no cue of what could be causing that, really I tried a lot of things, even checked if my dates were ordered properly, but the only thing that resolve the issue is using different min max values or using less data in the chart

Current behavior

The chart have a blue line created across it while it animate(visual glitch)

Reproducible sample

https://codepen.io/djaeofkao/pen/dyevQLv

Optional extra steps/info to reproduce

You may need to click on the preceding page button a couple time, but the bug always reappear.

I quickly took a screenshot of the behavior: https://photos.app.goo.gl/N7JJQvaVu6qSnGUB8

Possible solution

I would still consider myself a newbie, so unfortunately I really don't have a solution. But as always I have a huge respect for everyone contributing to the chart.js library, it serve my project really well!

Context

I have a 'paging system' because I have a lot of data so I use the scale min max property to move across the chart

chart.js version

3.9.1

Browser name and version

Chrome 103.0.5060.114

Link to your project

No response

[kurkle]

I think this could be fixed by scales animating their range change.

[heavyStuff3000]

I think this could be fixed by scales animating their range change.

Hi kurkle! It's not the first time you help me or resolve one of my post. Thanks a lot for your answer, but I don't understand your answer really well, can you clarify a little? I really want to fix this tiny glitch. Thanks again! By the way I really appreciate your work on this charting library

[kurkle]

I think this could be fixed by scales animating their range change.

Hi kurkle! It's not the first time you help me or resolve one of my post. Thanks a lot for your answer, but I don't understand your answer really well, can you clarify a little? I really want to fix this tiny glitch. Thanks again! By the way I really appreciate your work on this charting library

Its something not supported currently :)

[heavyStuff3000]

If only I had your knowledge I'd love to contribute to that, but I saw the word 'currently' :) so I guess it will be available in the future. As soon as this work I'll be really happy about that. Have a nice day :D

[harshit-dugar]

Hi @heavyStuff3000 can I work on this issue

[heavyStuff3000]

Do whatever you please. That'd be neat if you are smarter than me and can even consider fixing it. Good luck! That would be nice

[heavyStuff3000]

Hi @heavyStuff3000 can I work on this issue

Also if in the end you can redirect me to the code changes required to fix the bug it would be very kind, I'm very curious if I could comprehend this

[AlonMiz]

I solved this with a small workaround:

1. set the chart options.
2. postpone the dataset to few milliseconds with a simple setTimeout( )

that solved my issue. it was specifically for a time scale with different min max values.