When animation helps a reader follow a chart, when it only makes them wait, and how to time it. The Interaction guideline has the short rules that apply to every chart.
What it is for
Animation connects two states of the same chart. When the data changes, the reader sees which bar grew, which line moved and which item arrived or left, instead of comparing two pictures from memory. A short entrance can also show how the chart is built: bars that grow from the baseline make the baseline read as zero.
When to use
The data updates in place, after a filter, a new period or a refresh, and the reader needs to see what changed.
Items change order, as in a ranking. Motion shows where each one went.
Items are added or removed, and the reader should notice which.
The chart switches between two views of the same items, such as bars and a donut, and the reader should keep track of each item.
Focus moves along the data. A crosshair or a highlighted point that glides makes the jump easier to follow.
Use something else when
The chart loads once and never changes. An entrance only delays the values. Skip it, or keep it short.
The data updates several times a second. Transitions never finish and the chart looks jittery. Draw the latest state, or move the whole window as one shift.
The change is the message, such as a value crossing its target. Say it in text. Motion is easy to miss.
A dashboard with many charts. When all of them animate at once, the eye has nowhere to go.
The two views share no items. There is nothing to connect, and a cut is clearer.
Do it well
Keep updates short, about 200 to 500 milliseconds. An entrance can take a little longer, but the values should be readable within about a second.
Give every item a stable key, so it moves to its new place instead of fading out in one spot and in at another.
Grow from the baseline: bars from zero, lines from the axis, slices from their start angle.
Stagger by a few tens of milliseconds per item to show order. A long stagger makes the reader wait for the last bar.
Use a spring for changes the reader triggers again and again, like dragging a slider. A spring continues from where it is, so an interrupted change does not jump. Use an eased tween for a one-time entrance.
Move the axes on the same or a shorter timing than the marks, so the scale and the values never disagree for long.
Keep tooltips and focus fast. A tooltip that lags behind the pointer feels broken.
Pitfalls
Ignoring the reader's reduced motion setting. Readers who ask for less motion get the final state at once. See Hover and motion.
Motion that loops, or plays on its own without the reader starting it.
Animating on resize, so every window resize replays the chart.
Keys taken from the array position. After a sort, every bar morphs into its neighbor's value instead of moving.
A bouncy spring on a value. While it overshoots, the bar shows a value the data never had. Damp the spring until it settles without overshooting, or use a tween.
Changing the scale and the data at once with slow motion. The reader cannot tell whether a bar grew or the axis shrank. Keep the axis fixed, or say in text that it changed.
Morphing between shapes that encode different things. A change of shape looks meaningful even when it is not.
Patterns
Staggered entrance: bars grow from the baseline one after another, with a highlighted bar and a target line on their own timing.
Springs and tweens: the same update with each, to see how lines settle when a change reverses halfway.
Keyed updates: periods that are reordered, added and removed move, enter and leave.
Axis motion: the axes and their labels on their own timing.
Focus and crosshair: the hovered point, its series and the cursor glide from day to day.
Geometry morph: the same items move between bars, a rose, a donut and bubbles.