Recharts animations
Some Recharts components are animated out of the box. Those are:
These components also support animations, but the animations are turned off by default:
Basic animation settings
All of the animated components support the same controls. Different components will have different defaults:
| Property | Type | Description |
|---|---|---|
isAnimationActive | boolean | 'auto' | Turns the animation on or off. When set to 'auto' (the default for most components), animation is enabled unless the user has requested reduced motion via their device settings. Setting true always animates, ignoring the settings. |
animationBegin | number | Delay, in milliseconds, between the first render and when the animation starts playing. |
animationDuration | number | Duration, in milliseconds, of the animation. |
animationEasing | string | function | Easing function. Can be one of the predefined string values, a custom cubic-bezier(x1, y1, x2, y2) string, or a custom easing function. More on easing below. |
onAnimationStart | function | Callback that gets called when the animation starts playing, after the first render and after animationBegin had elapsed. |
onAnimationEnd | function | Callback that gets called when the animation finishes playing. |
Animation easing
Easing is a function that controls the pace of the animation. The predefined string values are:
ease(default)ease-inease-outease-in-outlinearspring— a spring physics simulation
You can also pass a custom cubic-bezier string in the form:
cubic-bezier(x1, y1, x2, y2)
where x1, y1, x2 and y2 are numbers that define the shape of the easing curve. You can use https://cubic-bezier.com/ to visually create and understand cubic-bezier functions.
For full control, you can also pass a custom easing function directly. The function receives a progress value between 0 and 1 and returns a transformed progress value.
Accessibility
When isAnimationActive is set to 'auto' (the default), Recharts respects the prefers-reduced-motion media feature and will turn off animations for users that have requested reduced motion via their device settings. If you explicitly set isAnimationActive={true}, animations will always play regardless of this setting.