[charts] Support animation

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

https://mui.com/x/

4.52k stars 1.31k forks source link

[charts] Support animation #9359

Closed alexfauquette closed 9 months ago

alexfauquette commented 1 year ago

Currently, charts are rendered dry. We could add animation on:

first render
container resize
axis resize
data update

alexfauquette commented 1 year ago

Recharts

They rely on react-smooth. See for example the animated bar elements

https://github.com/alexfauquette/recharts/blob/337081b2633ceb228a0f5fc67044d4f45ff60426/src/cartesian/Bar.tsx#L319

Nivo

The use '@react-spring/web'

In plot elements (Bar)
The axes components realising the axis in the gris might be defined together to have the grid and the axes tick moving together. Recharts don't have this problem since it does not animate axes modification

jamiedruce commented 1 year ago

Big plus one for this feature, but understand its bottom of the list in terms of functionally important features.

Coming from Nivo, the transitions when switching data out is very slick, something we make use of often.

alexfauquette commented 1 year ago

@jamiedruce Is customization a thing for you or do you always use the default animation?

jamiedruce commented 1 year ago

We just use the default actually. For us, with a 'dashboard' type app, it's just about giving a bit of life to the page where there can be lots of information to digest. We've found it makes a real difference to how the page feels for users. And certainly for changing data for charts where there are multiple views, it certainly helps communicate the change has happened.

Before Nivo, we used chartjs.org, again with some simple animation of initial load and data changes.

alexfauquette commented 9 months ago

Last component (line chart) is adding in v7 by #11620