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

// 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

const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    animation: {
      duration: 2000,           // 2 seconds
      easing: 'easeInOutCubic', // Smooth start and end
      delay: 500                 // Wait 0.5s before starting
    }
  }
});

Looping Animation

options: {
  animation: {
    duration: 2000,
    loop: true,  // Repeat forever
    easing: 'linear'
  }
}

Property-Specific Animations

Configure animations for individual properties.

Namespace: options.animations[animationName]

Option	Type	Description
properties	string[]	Properties to animate (defaults to key name)
type	string	'number', 'color', or 'boolean'
from	number|Color|boolean	Start value
to	number|Color|boolean	End value
fn	function	Custom interpolator

Default Property Animations

// Chart.js default animations
animations: {
  numbers: {
    type: 'number',
    properties: ['x', 'y', 'borderWidth', 'radius', 'tension']
  },
  colors: {
    type: 'color',
    properties: ['color', 'borderColor', 'backgroundColor']
  }
}

Custom Property Animation

options: {
  animations: {
    // Animate only Y values
    y: {
      duration: 2000,
      from: 0,  // Start from bottom
      easing: 'easeOutBounce'
    },
    // Animate only colors
    colors: {
      duration: 1000,
      from: 'transparent'
    },
    // Disable X animation
    x: false
  }
}

Tension Animation (Line Charts)

options: {
  animations: {
    tension: {
      duration: 1000,
      easing: 'linear',
      from: 1,    // Very curvy
      to: 0,      // Straight lines
      loop: true  // Continuously animate
    }
  }
}

Transitions

Transitions define animations for specific interaction modes.

Built-in Transition Modes

Mode	When Triggered	Default Duration
active	Hover/focus	400ms
resize	Chart resize	0ms (instant)
show	Dataset shown via legend	1000ms
hide	Dataset hidden via legend	1000ms
reset	Chart reset	1000ms

Customizing Hover Animation

options: {
  transitions: {
    active: {
      animation: {
        duration: 600,  // Slower hover animation
        easing: 'easeOutElastic'
      }
    }
  }
}

Show/Hide Animations

options: {
  transitions: {
    show: {
      animations: {
        x: { from: 0 },
        y: { from: 0 }
      }
    },
    hide: {
      animations: {
        x: { to: 0 },
        y: { to: 0 }
      }
    }
  }
}

Custom Transition Mode

// Trigger custom transition
chart.update('myCustomMode');

// Define custom transition
options: {
  transitions: {
    myCustomMode: {
      animation: {
        duration: 500,
        easing: 'linear'
      }
    }
  }
}

Easing Functions

Chart.js provides 36 easing functions.

Easing Categories

Category	Functions	Visual Effect
Linear	linear	Constant speed
Quad	easeInQuad, easeOutQuad, easeInOutQuad	Gradual acceleration/deceleration
Cubic	easeInCubic, easeOutCubic, easeInOutCubic	More pronounced curves
Quart	easeInQuart, easeOutQuart, easeInOutQuart	Strong acceleration
Quint	easeInQuint, easeOutQuint, easeInOutQuint	Very strong acceleration
Sine	easeInSine, easeOutSine, easeInOutSine	Smooth, gentle curves
Expo	easeInExpo, easeOutExpo, easeInOutExpo	Exponential growth
Circ	easeInCirc, easeOutCirc, easeInOutCirc	Circular motion
Elastic	easeInElastic, easeOutElastic, easeInOutElastic	Spring/bounce back
Back	easeInBack, easeOutBack, easeInOutBack	Overshoot then settle
Bounce	easeInBounce, easeOutBounce, easeInOutBounce	Bouncing ball effect

Easing Pattern Meanings

• easeIn: Slow start, fast end
• easeOut: Fast start, slow end (most natural)
• easeInOut: Slow start, fast middle, slow end

Common Easing Choices

// Default (smooth and natural)
easing: 'easeOutQuart'

// Bouncy entrance
easing: 'easeOutBounce'

// Elastic snap
easing: 'easeOutElastic'

// Smooth both ends
easing: 'easeInOutCubic'

// Constant speed
easing: 'linear'

Animation Callbacks

Execute custom code during animations.

Namespace: options.animation

Callback	When Called	Parameters
onProgress	Each animation frame	Animation state object
onComplete	Animation finishes	Animation state object

Callback Parameters

{
  chart: Chart,           // Chart instance
  currentStep: number,    // Current animation step
  initial: boolean,       // True for initial chart animation
  numSteps: number        // Total animation steps
}

Progress Bar Example

const progressBar = document.getElementById('progress');

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    animation: {
      duration: 2000,
      onProgress: (animation) => {
        const progress = (animation.currentStep / animation.numSteps) * 100;
        progressBar.style.width = progress + '%';
      },
      onComplete: (animation) => {
        console.log('Animation finished!');
        progressBar.style.width = '100%';
      }
    }
  }
});

Trigger Action After Animation

options: {
  animation: {
    onComplete: (animation) => {
      if (animation.initial) {
        // Only run after initial chart render
        showDataTable();
      }
    }
  }
}

Disabling Animations

Disable All Animations

// Instance-level
options: {
  animation: false
}

// Global default
Chart.defaults.animation = false;

Disable Specific Animations

options: {
  animations: {
    colors: false,  // Disable color animations
    x: false        // Disable x-axis animations
  }
}

Disable Transition Modes

options: {
  transitions: {
    active: {
      animation: {
        duration: 0  // No hover animation
      }
    }
  }
}

Advanced Patterns

Progressive Line Reveal

options: {
  animation: {
    duration: 2000,
    onProgress: function(animation) {
      const chartInstance = animation.chart;
      const ctx = chartInstance.ctx;
      const meta = chartInstance.getDatasetMeta(0);

      // Draw line progressively
      const progress = animation.currentStep / animation.numSteps;
      // Custom rendering logic here
    }
  }
}

Staggered Animation

options: {
  animation: {
    delay: (context) => {
      let delay = 0;
      if (context.type === 'data' && context.mode === 'default') {
        delay = context.dataIndex * 50;  // 50ms delay per data point
      }
      return delay;
    }
  }
}

Drop Animation

options: {
  animations: {
    y: {
      duration: 2000,
      from: (ctx) => {
        // Drop from top of chart
        return ctx.chart.scales.y.getPixelForValue(
          ctx.chart.scales.y.max
        );
      },
      easing: 'easeOutBounce'
    }
  }
}

Color Fade Transition

options: {
  animations: {
    backgroundColor: {
      type: 'color',
      duration: 1000,
      from: 'transparent',
      to: 'rgba(255, 99, 132, 0.5)',
      easing: 'easeInOutQuad'
    }
  }
}

Performance Considerations

Reduce Animation Duration for Large Datasets

const dataPoints = data.datasets[0].data.length;

options: {
  animation: {
    duration: dataPoints > 100 ? 500 : 1000  // Faster for large datasets
  }
}

Skip Animations on Updates

// No animation for this update
chart.update('none');

// Or specific mode
chart.update('active');  // Use 'active' transition

Responsive Animation Handling

options: {
  transitions: {
    resize: {
      animation: {
        duration: 0  // Instant resize (default)
      }
    }
  }
}

Framework Integration

React (react-chartjs-2)

import { Line } from 'react-chartjs-2';

function AnimatedChart() {
  const options = {
    animation: {
      duration: 2000,
      easing: 'easeOutQuart',
      onComplete: () => {
        console.log('Animation done!');
      }
    }
  };

  return <Line data={data} options={options} />;
}

Vue (vue-chartjs)

<script setup>
import { Line } from 'vue-chartjs';

const chartOptions = {
  animation: {
    duration: 1500,
    easing: 'easeInOutCubic'
  }
};
</script>

<template>
  <Line :data="chartData" :options="chartOptions" />
</template>

Additional Resources

• See references/easing-functions.md for visual easing function guide
• See references/animation-patterns.md for advanced animation patterns
• See examples/progressive-animation.html for progressive line reveal example
• See examples/staggered-bars.html for staggered bar animation example