Animate a bar chart from JSON in 10 minutes

A bar chart that animates from zero to its values is the most overused, hardest-to-screw-up data visualization in marketing. Annual review videos use it. Earnings calls use it. Every B2B SaaS launch video uses it. And almost all of them are built in After Effects from a CSV someone pasted into a spreadsheet at 11pm.

There is a faster path: keep the data in JSON, the template in HTML, and the render in CI. The version we will build below is ten minutes of work, three hundred bytes of data, and a clean MP4 at the end.

The data and the template, separated

The split that matters: a JSON file holds the data, the HTML holds the template. The template is dumb — it reads window.__DATA__ and lays bars out. The data is dumb — it is a flat array of { label, value }.

[
  { "label": "Q1", "value": 42 },
  { "label": "Q2", "value": 68 },
  { "label": "Q3", "value": 91 },
  { "label": "Q4", "value": 124 }
]

This split is what makes the rest scale. You can swap the data without touching the template. You can swap the template without touching the data. The chart is reproducible.

The render: three sections

The template has three pieces:

1. Title row. Headline, subhead, source attribution. Quiet typography.
2. Bars. One <div> per data point. Width is the bar height, animated from 0 to (value / max) * 100%.
3. Value labels. A number next to each bar, counting up from 0 to the value as the bar grows.

[
{ "label": "Q1", "value": 42 },
{ "label": "Q2", "value": 68 },
{ "label": "Q3", "value": 91 },
{ "label": "Q4", "value": 124 }
]

The animation: stagger the bars

Bars that all animate together read as a single block. Bars that stagger by 80-120ms per row read as a story — the eye lands on Q1, then Q2, then Q3. The stagger is the entire difference between "data" and "narrative."

Implement it with a transition-delay per row, or — cleaner — set the bar's transform after a setTimeout indexed by row. Either works. The easing should be cubic-bezier(.16, 1, .3, 1) — the settle curve that lands without bouncing.

The value count-up

The number next to each bar should count up from 0 to the final value as the bar grows. There is a temptation to interpolate linearly. Resist; tie the count to the same easing as the bar so the number is "at" the right value while the bar is growing.

Practically: on every animation frame, compute current_value = final_value * eased_t and update textContent. Use Math.round for integers, .toFixed(1) for decimals. Use font-variant-numeric: tabular-nums on the value so digit widths do not dance.

Going bigger: comparison and time

Two extensions worth knowing:

• Comparison. Two bars per row, color A and color B. The reveal becomes: bar A grows, bar B grows next to it, label appears underneath.
• Time. Bars that scrub left as new ones appear right. This is harder to do well — see the stock chart tutorial for the windowing trick.

Both are the same engine, more numbers.

Render the MP4

Once the chart looks right, render it. The playground supports importing JSON via window.__DATA__; the Next.js API integration takes a POST and returns an MP4. Pick whichever surface you live in.

The whole pipeline is reproducible: same JSON, same template, same MP4. If marketing wants a Spanish version, you swap the labels and re-render. If the numbers update, you POST the new JSON. The chart is a build artifact.

That is the deal: ten minutes of code, infinite re-renders, no After Effects.