Animation

Chart elements use the default timings below. In a composed chart, bars land before lines and areas finish drawing.

Data changes slide, they do not morph

Elements are matched by their category (the data-key of the category axis, or the name of a sector), not by their position in the array. When a time window moves, the bars slide; when a series gets longer, new points grow out of their neighbour; removed points fold into the points that stay, and removed bars close in the gap between their neighbouring categories, so no bar ever covers another. Points of one line, area or pie keep a shared timing, so the shape never crosses itself. An interrupted animation continues from what is on screen.

Give every row a unique category value to get this behaviour. Rows without a category fall back to their index.

What else moves

• Axes and grid lines move with the series they describe: a tick that stays slides to its new place, a new tick fades in from where the old scale would have put it, and a removed tick fades out. Labels never disagree with the bars under them while those move.
• Series hidden from the legend leave instead of vanishing: bars collapse, areas fold onto their baseline (a stack closes over them) and lines sweep out. Showing them again reverses the motion.
• Data that becomes empty sweeps lines and areas out; data that returns sweeps them back in.
• Labels (label, <LabelList>) move with their shapes. Entering and exiting labels fade with them.

What does not animate

• Resizing. When the chart's box changes size, for example while a sidebar collapses, the chart follows the box at once instead of trailing behind it.
• Brush drags. While a brush traveller or its slide is dragged, the chart follows the pointer directly.
• Server rendering and hydration. The server sends the entrance start. The entrance plays after hydration when the chart is on screen.

Tune the motion

Every chart accepts transition and is-animation-active defaults for its items. An item’s explicit prop overrides the chart’s value. Every animated element accepts a transition prop. It replaces the default timing for that element:

<Bar data-key="desktop" :transition="{ duration: 0.3, ease: 'easeOut' }" />

<Line data-key="mobile" :transition="{ type: 'spring', stiffness: 200, damping: 25 }" />

The type is exported as ChartTransition.

Turn it off

<BarChart :data="rows" :height="300" :is-animation-active="false">
  <Bar data-key="desktop" />
  <Bar data-key="mobile" />
</BarChart>

Axes and grid lines follow the series: when no series in a chart animates, the whole chart stays still.

Charts also follow the operating system's reduce motion setting: data changes snap to their final state and the tooltip stops gliding.

React to animation

<Bar data-key="desktop" @animation-start="onStart" @animation-end="onEnd" />

Review motion frame by frame

The repository's motion lab renders every chart through every kind of data change, frame by frame on a fake clock. Before a release, a gate checks every transition for jumps, reversals, stalls and shapes that do not reach their target. To look at one transition, pnpm lab film <scenario> writes a video, a contact sheet of its frames and the per-frame geometry; pnpm lab timing <scenario> measures frame timing on a real clock, also with the CPU slowed 4×. See packages/vue/test/lab/README.md.