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}>
  <BarSeries
  ...
  >
    <Animation duration={2000} easing={easeBounceOut} />
  </BarSeries>
</Chart>

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

Documentation

Please click here for the documentation of the animation feature.

Showcase Your Apps on DevExpress.com

Highlight your business app and share your development experiences with the DevExpress community. To include your app in our upcoming App Showcase, please forward an application screenshot to clientservices@devexpress.com and tell us which DevExpress products you currently use within your organization.
No Comments

Please login or register to post comments.