JavaScript/jQuery PieChart - animation

The UI component animates its elements at the beginning of its lifetime and when the data source changes.

import React from 'react';
 
import 'devextreme/dist/css/dx.light.css';
 
import PieChart, {
    Animation 
} from 'devextreme-react/pie-chart';
 
class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Animation
                    easing="linear"
                    duration={500}
                    maxPointCountSupported={100}
                />
            </PieChart>
        );
    }
}
export default App;

Easing functions specify how the speed of the animation changes over time. The following easing functions are available.

• easeOutCubic
  The animation starts fast and slows down gradually towards the end.
• linear
  The animation progresses at a constant pace.

If the number of series points in your chart increases over time, animating them may affect UI component performance. In this case, use the maxPointCountSupported property to specify a limit for the number of points. When this limit is exceeded, the animation will be disabled.