DevExtreme - React Chart Update Transitions

DevExtreme Team Blog
15 January 2020

The new Animation plugin for the React Chart enables update transition animations. Once you add the plugin to your chart configuration, animations are automatically shown on data updates.

Transition Animation

Custom Animations

You can use the two properties duration and easing to customize the animation. easing is a function, as supplied by the package d3-ease. Here is a sample chart configuration with a custom animation setup:

import { easeBounceOut } from 'd3-ease';

<Chart data={chartData}>
    <Animation duration={2000} easing={easeBounceOut} />

Custom Animation

All Series Types Supported

All chart series types support animation. Here is a pie chart with the Animation plugin configured.

Pie Chart Animation


Please click here for the documentation of the animation feature.

FREE DevExpress Xamarin UI Controls

Deliver high-impact native mobile apps with our feature-rich Data Grid, Scheduler, Chart, TabView, Editors, and utility controls. Reserve your free copy today!
No Comments

Please login or register to post comments.