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.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
No Comments

Please login or register to post comments.