Animated line chart in HTML: 60 lines, no chart library

Every dashboard ships a line chart. Every line chart, somewhere along the way, gets requested as a video — for an email, a launch tweet, a slide. The chart library you used for the dashboard cannot help; it knows nothing about MP4. So the chart gets re-built in After Effects, falls behind the data, and ages out in a week.

The simpler path: write the line chart in HTML and SVG once. Render it to MP4 when you need video. The same sixty lines power the dashboard, the email, and the launch tweet.

What a "line chart animation" actually is

Three things, in order:

1. A stroked SVG <path> drawn through your data points.
2. A stroke-dasharray / stroke-dashoffset reveal that traces the line from left to right.
3. A moving dot that rides the path so the eye has something to follow.

Everything else — gridlines, axis labels, the gradient fill underneath — is decoration. Get those three things right and you have a chart that reads in motion.

The path trace, explained

stroke-dasharray sets the pattern of a dashed line. Set it to the full length of the path and stroke-dashoffset to that same length, and the line becomes invisible. Animate stroke-dashoffset to zero and the line draws itself.

The one fiddly bit: you need to know the path's length. In a browser you'd ask path.getTotalLength(). In a deterministic template you compute it from the data, or you set pathLength="1" on the path element — then your dash math is just 0 to 1 regardless of the actual geometry. The second approach is more portable and survives a copy-paste into any rendering pipeline.

The tracking dot

The dot does two jobs: it tells the eye where the latest data is, and it covers the leading edge of the trace so the line doesn't look like it's being extruded by a printer. Position it at the path's endpoint and scale it on entry — a 200ms grow-from-zero feels right.

If you're feeling fancy, drop a soft drop shadow under the dot. Don't go further than that. A line chart with too much chrome reads as a stock photo.

Gridlines you can ignore

The grid is structural; it should never compete with the data. Three horizontal lines at 25/50/75 of the chart height, stroked at 8% white on a dark background, is enough. Axis labels in 11px tracked-out uppercase. If a viewer notices the grid before the line, the grid is wrong.

Counting up the headline number

The big number in the corner is the headline; it should arrive with the line. Animate it from zero to the final value over the same duration as the path trace — a sub-1.5s ease-out is enough. Use tabular-nums so the digits don't dance.

For a deterministic render, the count is just value * eased(t). No requestAnimationFrame jitter, no off-by-one frame at the end.

Going from chart to video

Once the chart is HTML, the render pipeline treats it like any other template. Pass in the data as variables, render in a 1080x1080 for Instagram, a 1080x1920 for Reels, a 1920x1080 for the email hero. Same template, four exports.

The trick is making the data the variable, not the chart. Pass in an array of {x, y} points and a max value; generate the SVG path with a one-line reduce. The chart template never changes; only the data does.

Where this falls down

Two cases where you reach for a chart library instead:

• Hundreds of series, interactive tooltips. Animation libraries do not help here either; you need real charting code. Use Observable Plot or D3.
• Charts that need to recompute live in the browser. This is a dashboard problem, not a video problem. Use your existing chart lib.

For everything in between — a single series, a value to highlight, a video to render — sixty lines of HTML beats a 120kb chart library and an After Effects file. Drop it in the playground, wire your data, ship the video.