Designing animated charts
A chart is about change over time. Odd, then, that most dashboards show that change with something that doesn’t move. A static line. A rendered PNG. A screenshot.
I ship a lot of data-heavy interfaces: forecasting dashboards at Peak, weather experiences at IBM, real-time intelligence feeds at OpenWatch. The recurring lesson is that the same chart reads completely differently depending on whether it’s alive, waiting for input, or somewhere in between. Animation isn’t decoration. It’s a way of telling the reader what the thing actually is.
Three demos I keep coming back to, in the order I usually reach for them.
1. When the data is actually live
Start with the honest case. If the value is being re-fetched, the chart should show it. No “last updated 3 hours ago” timestamp trying to apologise for a picture that already finished telling its story.
The pattern: a sliding window. A fixed number of points, a new one arrives on a cadence, the oldest falls off the left. A small pulse on the latest point anchors the eye. The line isn’t “animated” so much as it’s just behaving like data behaves.
NDAQ live
$140.95
-1.08 (-0.76%)
The temptation is to add more: interpolate, tween between the old and new path, fade. Almost always it’s the wrong choice. Smooth tweening disguises the discrete cadence of the underlying data. A 400 ms tick should look like a 400 ms tick.
What does matter is colour and weight. Emerald vs red keyed to delta since the first visible point, the stroke heavy enough to read at small sizes, the pulse capped so it fades before the next tick lands. Hit pause and notice how quickly the chart stops feeling urgent.
2. When the data is historical
A historical chart is finished. The animation it needs isn’t forward. It’s sideways, into precision. Put the cursor somewhere, and the chart should tell you exactly what that somewhere means.
120-day
$125.30
move cursor over chart
Three small choices do most of the work:
- The dot under the cursor is the price, not the cursor. The vertical guideline snaps to the nearest data point, not the pixel you’re hovering on. Chart readers want to know “what was this value on day 47,” not sub-pixel sympathy.
- The readout at top updates instantly. Everything else in the chart can have softness. The number cannot. If the user is doing work with the chart, they need the precise value without waiting.
- Leave, and it returns to “latest” without making a show of it. The guideline disappears, the readout shows the current value. No fade-out. No bounce. Exiting shouldn’t feel like a scene change.
3. When the context itself changes
Switching timeframes is where charts usually break. One click and you’re looking at a different shape on a different scale with different labels, and it’s on you to re-orient.
The fix is to interpolate. Same number of points, morph from the old shape to the new one. Not to be fancy, but to preserve the sense of which chart is this and what did I just do.
Portfolio · 1Y
$155.80
650 ms is the budget I keep reaching for. Long enough that the eye can follow what’s moving; short enough that it doesn’t feel like the chart has opinions. An ease-out cubic lands the motion confidently rather than creeping to a halt.
The axis labels swap instantly, not on a crossfade. This is the lesson from the hover chart: anything that encodes a precise value must update immediately. The line can be the thing that moves.
A rule of thumb
When in doubt: ask what the animation is claiming. A live chart claims the data is current. A hover interaction claims the number is worth being precise about. A morph between timeframes claims this is the same chart, not a new screen.
Motion that doesn’t make one of those claims is usually just showing off.