Explore Semiotic's declarative animate prop across chart types. All charts share the controls below. Click Swap data to trigger a data-change transition or Replay intro to remount and watch the chart draw itself.
JSX
// Shared animation config <BarChart data={data} categoryAccessor="category" valueAccessor="value" animate={{ "duration": 500, "easing": "ease-out", "intro": true }} />
Charts
Ordinal Charts
Bar Chart
Bars grow from the baseline on intro and interpolate height on data change.
Stacked Bar Chart
Stacked segments grow from baseline on intro. Only the topmost segment is rounded when roundedTop is set.
Pie / Donut Chart
Wedge angles interpolate smoothly on data change. New slices sweep open from zero; removed slices collapse and fade. Try swapping to dataset C to see a new slice enter.
XY Charts
Line Chart
Lines draw from left to right on intro and interpolate vertex positions on data change.
Scatterplot
Points scale up from r=0 on intro and move to new positions on data change.
Network Charts
Force-Directed Graph
Force layouts use the simulation as their natural animation. Swap edges to see the graph re-settle into a new arrangement.
Sankey Diagram
Nodes expand from the chart center on intro. Edge widths and node positions transition smoothly on data change.
Treemap
Cells expand from the center on intro and resize smoothly when values change.
How It Works
Intro Animation
When animate is enabled (intro defaults to true), the first render synthesizes a "zero state" and transitions to the computed positions:
- Bars grow from the baseline (height 0)
- Pie/Donut wedges sweep from a collapsed arc
- Lines/Areas draw from left to right (canvas clip reveal)
- Points scale up from radius 0
Disable intro with animate={{ intro: false }} to only animate data changes.
Data-Change Transitions
When data changes, the scene graph diffs by identity (category for ordinal, x/y for XY) and interpolates positions, dimensions, and angles from old to new values. Entering elements fade in; exiting elements fade out.
Configuration
JSX
// Boolean — 300ms ease-out, intro enabled <BarChart animate /> // Custom duration and easing <BarChart animate={{ duration: 800, easing: "linear" }} /> // Data-change only, no intro <BarChart animate={{ intro: false }} /> // Disable animation entirely <BarChart animate={false} />