chartjs-animationslisted
Install: claude install-skill Riltonbn/chartjs-expert
# Chart.js Animations (v4.5.1)
Complete guide to configuring and customizing animations in Chart.js.
## Animation Basics
Chart.js animates charts automatically. Animations provide visual feedback during chart initialization, data updates, and user interactions.
### Animation Configuration Structure
Three main configuration keys:
| Key | Purpose | Example Use Case |
|-----|---------|------------------|
| `animation` | Global animation settings | Duration, easing, delay |
| `animations` | Property-specific animations | Animate only x-axis values |
| `transitions` | Mode-specific animations | Custom hover behavior |
### Configuration Locations
```javascript
// Global configuration (all charts)
Chart.defaults.animation.duration = 2000;
// Chart instance configuration
const chart = new Chart(ctx, {
options: {
animation: {
duration: 1500,
easing: 'easeInOutQuart'
}
}
});
// Dataset-specific configuration
datasets: [{
label: 'Sales',
data: [10, 20, 30],
animation: {
duration: 3000 // This dataset animates slower
}
}]
```
## Main Animation Options
Namespace: `options.animation`
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `duration` | number | 1000 | Animation length in milliseconds |
| `easing` | string | `'easeOutQuart'` | Easing function name |
| `delay` | number | undefined | Delay before animation starts (ms) |
| `loop` | boolean | undefined | Loop animation endlessly |
### Basic Example