Animation

Add data-chart-animate to any table for entrance animations. Each chart type has its own animation style.

Quick Start

<table data-chart="bar" data-chart-animate>
  ...
</table>

Live Examples

Click Replay to re-run any animation. Switch to Code to see the HTML source.

Bar Chart

Bars grow from the baseline with staggered delays

Quarterly Revenue
Quarter	Revenue	Profit
Q1	420	180
Q2	580	240
Q3	510	210
Q4	690	310

Line Chart

Line draws from left to right, then dots fade in

Monthly Users
Month	Users	Active
Jan	1200	900
Feb	1800	1400
Mar	1500	1100
Apr	2200	1800
May	2800	2200

Area Chart

Line draws across, then the area fill fades in

Weekly Visitors
Week	Visitors
W1	3200
W2	4100
W3	3800
W4	5200
W5	4800
W6	5900

Pie

Slices scale in one by one

OS Share
OS	Share
Linux	40
macOS	32
Win	28

Donut

Segments scale in with staggered delay

Task Status
Status	Count
Done	45
Active	30
Review	15
Blocked	10

Stacked Bar

Stacked segments grow from baseline together

Device Traffic
Q	Desktop	Mobile	Tablet
Q1	300	200	50
Q2	280	250	60
Q3	260	300	70
Q4	320	350	80

Horizontal Bar

Horizontal bars grow from left with stagger

Language Popularity
Language	Users
TypeScript	850
Python	720
Go	510
Rust	340

Animation by Chart Type

Element	Animation	Duration	Stagger
`.data-chart-bar`	Height grows from 0	600ms	60ms per bar
`.data-chart-line`	Stroke draws left to right	960ms	—
`.data-chart-dot`	Fade in after line completes	300ms	80ms per dot
`.data-chart-area`	Opacity fades in	800ms	400ms delay
`.data-chart-slice`	Scale from center	600ms	80ms per slice

Customization

Duration

Control animation speed per element:

<table data-chart="bar" data-chart-animate data-chart-animate-duration="1200">

Default: 600ms. Range: any positive number.

Stagger

Control delay between elements:

<table data-chart="bar" data-chart-animate data-chart-animate-stagger="100">

Default: 60ms. Higher values create more sequential animations.

Combined

<table
  data-chart="line"
  data-chart-animate
  data-chart-animate-duration="300"
  data-chart-animate-stagger="30"
>

Reduced Motion

Animations are automatically disabled when prefers-reduced-motion: reduce is set. No additional configuration needed. Charts render instantly in their final state.