Line chart add/removal of data weird animation

[Hurtak]

We have stock chart that has date filter than can cause removal or addition of data to already existing chart.
The removal animation (eg going from last 3M filter to last 1M filter) looks fine, but the opposite looks weird.

Screen.Recording.2022-08-25.at.10.59.08.mov

Any ideas to adjust this to be more pleasing?

[kurkle]

Keep the whole data, and just adjust scale min/max?

[Hurtak]

Data is loaded on demand, so that would slow the initial load because the initial filter is not all but 3m

[kurkle]

Clear the data first, when going up in the range?

dataset.data = [];
chart.update();
dataset.data = theData;
chart.update();

Update the range first and add the data after that?

Configure a custom transition with from: 0 for x-coordinate? (And use it by chart.update('myTransition'))

[Hurtak]

Thanks, using custom animation settings was a way to go :)

I did

        animations: {
          x: { duration: 0 },
          y: { duration: 150, easing: 'easeOutBack' },
        },

Which produced much nicer result

2.mov

[VasiliyBP]

@kurkle Hey, is it possible to make data change animation like on coinbase?

Screen.Recording.2023-05-22.at.14.30.59.mov