React PolarChart - 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.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import PolarChart, {
- Animation
- } from 'devextreme-react/polar-chart';
- class App extends React.Component {
- render() {
- return (
- <PolarChart ... >
- <Animation
- easing="linear"
- duration={500}
- maxPointCountSupported={100}
- />
- </PolarChart>
- );
- }
- }
- export default App;
easing
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.
Use the VizAnimationEasing
enum to specify this property when the UI component is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: EaseOutCubic
and Linear
.
maxPointCountSupported
Specifies how many series points the UI component should have before the animation will be disabled.
If you have technical questions, please create a support ticket in the DevExpress Support Center.