> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.
# Animations
> Add smooth animations to your charts
Animations make your charts more engaging and help users track changes. Recharts provides built-in animation support for all chart types.
## Default animations
All Recharts components animate by default when they first render:
```jsx theme={null}
import { LineChart, Line, XAxis, YAxis } from 'recharts';
function AnimatedChart() {
return (
{/* This line will animate on mount */}
);
}
```
## Animation props
Control animation behavior on Line, Area, Bar, and other graphical components.
### Enable/disable animations
```jsx theme={null}
{/* Enable animation (default) */}
{/* Disable animation */}
{/* Auto mode - respects prefers-reduced-motion */}
```
Setting `isAnimationActive="auto"` disables animations in SSR and respects the user's `prefers-reduced-motion` system preference for accessibility.
### Animation duration
Control how long animations take (in milliseconds):
```jsx theme={null}
{/* Default: 400ms */}
{/* Fast animation */}
{/* Slow animation */}
```
### Animation easing
Choose the easing function for smooth transitions:
```jsx theme={null}
{/* Default: ease */}
{/* Common easing functions */}
```
### Animation delay
Delay the start of the animation:
```jsx theme={null}
{/* Start immediately (default) */}
{/* Wait 500ms before animating */}
```
## Staggered animations
Create sequential animations by delaying each series:
```jsx theme={null}
function StaggeredChart() {
return (
);
}
```
## Animation on data updates
By default, Recharts animates when data changes:
```jsx theme={null}
function DynamicChart() {
const [data, setData] = useState(initialData);
const updateData = () => {
setData(newData); // Chart will animate to new values
};
return (
<>
);
}
```
### Animate new values
Control whether new data points animate:
```jsx theme={null}
```
## Chart-specific animations
### Line chart animations
Lines draw from left to right:
```jsx theme={null}
```
### Area chart animations
Areas fill from bottom to top:
```jsx theme={null}
import { AreaChart, Area } from 'recharts';
```
### Bar chart animations
Bars grow from the baseline:
```jsx theme={null}
import { BarChart, Bar } from 'recharts';
```
## Tooltip animations
Control tooltip animation behavior:
```jsx theme={null}
{/* Animated tooltip (default) */}
{/* Instant tooltip */}
```
## Performance considerations
### Disable animations for large datasets
For charts with many data points, animations can impact performance:
```jsx theme={null}
function LargeDataChart({ data }) {
const shouldAnimate = data.length < 100;
return (
);
}
```
### Reduce animation duration
Shorter animations feel snappier and reduce rendering time:
```jsx theme={null}
```
## Accessibility
### Respect user preferences
Always respect the `prefers-reduced-motion` setting:
```jsx theme={null}
{/* Automatically respects user preferences */}
```
### Provide instant alternatives
For critical data visualization, consider offering a "skip animation" option:
```jsx theme={null}
function AccessibleChart() {
const [animate, setAnimate] = useState(true);
return (
<>
);
}
```
## Advanced patterns
### Coordinated multi-series animations
Animate multiple series together:
```jsx theme={null}
const DURATION = 600;
const EASING = "ease-out";
```
### Custom easing curves
Use CSS easing functions:
```jsx theme={null}
```
Common cubic-bezier curves:
* Material Design standard: `cubic-bezier(0.4, 0.0, 0.2, 1)`
* Ease-in-out (smooth): `cubic-bezier(0.42, 0, 0.58, 1)`
* Bounce: `cubic-bezier(0.68, -0.55, 0.265, 1.55)`
### Animation on hover
Animate dots when hovering:
```jsx theme={null}
```
## Best practices
**Keep animations subtle**
Animations should enhance, not distract. Stick to 200-600ms for most charts.
**Test with real data**
Animations that work well with 10 data points may perform poorly with 1000. Always test with production-sized datasets.
**SSR compatibility**
Set `isAnimationActive="auto"` to prevent animation issues during server-side rendering.
## Animation timing reference
| Component | Default Duration | Default Easing |
| --------- | ---------------- | -------------- |
| Line | 400ms | ease |
| Area | 400ms | ease |
| Bar | 400ms | ease |
| Tooltip | 400ms | ease |
## Common patterns
### Instant updates for live data
```jsx theme={null}
function LiveChart({ liveData }) {
return (
);
}
```
### Smooth transitions for dashboards
```jsx theme={null}
function DashboardChart({ data }) {
return (
);
}
```