How to make an animated pie chart (or a running bar race)

Make an animated pie chart free, no signup

A static pie chart is read once and forgotten. An animated one holds attention for the two or three seconds it takes to sweep in — long enough for a viewer to register which slice is biggest before they've consciously read a single label. That's the whole case for animating a chart that doesn't otherwise need to move.

0123456789010123456789001234567890Direct — 42%Search — 28%Social — 18%Referral — 12%
A donut chart, running. Every slice grows during its own angular window, so the whole thing sweeps like a clock hand rather than popping in at once.

Customise Animated pie chart →

1. Pick the chart that matches the number

A pie or donut chart answers one question: how does a whole divide into parts, right now? It only works when the parts genuinely sum to a total — market share, a budget split, a survey's yes/no/maybe. Past six or seven slices it stops being readable at a glance, which is why the templates here cap at seven: more than that and a chart isn't communicating, it's decorating.

A running bar chart answers a different question: who's ranked where, and how did that change? It's built for a value that moves over time — sales by quarter, a leaderboard, population by decade — where the motion of one bar overtaking another is the actual point, not a stylistic add-on. If your data has a time axis, you almost certainly want a bar race instead of a pie.

Python01234567890120123456789012345678JavaScript01234567890123456012345678901234Rust012345678901234012345678901Go0123456789012301234567890123TypeScript01234567890123450123456789012
A running bar chart, running. Bars sort themselves into descending order as their values settle — the overtaking is what a still image can't show.

Customise Running bar chart →

2. Build it

Both templates work the same way: type your labels and values into rows, pick a variant, and the chart animates immediately in the preview. Pie and donut differ only in whether the center is hollow — donut rolls the running total up in the hole, pie fills it solid. The bar race sorts your rows into rank order automatically; you don't have to pre-sort your data.

Color comes from a small set of built-in palettes rather than a picker with fifty options — chosen because a chart with six clashing slice colors is worse than one with five that were designed to sit next to each other. You can still override individual colors if a brand palette matters more than the defaults.

3. Sequence the reveal so it argues your point

The order slices sweep in, or bars grow, is the order a viewer's eye is guided through your data — so put the number you want remembered where the motion lands last, not first. A pie that sweeps largest-slice-first spends its most attentive second on the least surprising fact. Reordering your rows so the interesting comparison resolves at the end is free and takes ten seconds.

The same logic applies to a bar race: if the whole point is that two competitors swap places near the end, make sure your data actually has enough close ranks to produce that overtake. A race with no lead changes is just a bar chart that took four seconds to draw.

4. Export — and this is where most chart tools decide for you

Nearly every animated-chart tool we looked at — amCharts' chart race generator, Canva's bar chart maker, Flowi — hands you one output: a video file. Flowi's own pricing page states it plainly: the free tier exports "MP4 video file" and carries a watermark on every chart type. That's a fine answer if you're posting to TikTok. It's the wrong answer if the chart needs to sit on a web page, because a video is a fixed-resolution raster that needs a player, buffers, and can't be styled with CSS.

The infographic animator exports a self-contained SVG instead, alongside MP4, GIF and WebM for social. The SVG animates with CSS keyframes and SMIL, not JavaScript — this renderer refuses to ship anything containing a <script> tag, so the file that comes out is a few kilobytes of markup you can paste directly into a page. It scales to any size with no quality loss, and there's no watermark on the free export.

MP4 is still the right choice for a Reel or a TikTok. GIF works for an email or a place that can't play video. The rule that actually matters: if the chart lives on a website, export SVG; if it lives inside a video, export MP4. Reaching for video by default, the way most chart tools do, is optimizing for the one destination and making the other one harder.

The same engine, other shapes

Pie charts and bar races are two of eight infographic templates, and infographics are one of five studios built on the same renderer. A flowchart is the same idea applied to a process instead of a dataset; a map route is the same idea applied to geography.

DraftReviewApprovePublish
The same reveal-by-sequence idea, applied to a process instead of a chart — in the flowchart animator.

Customise Animated process flow →

WAATLAS
A wordmark building itself the same way a chart builds itself — in the logo animator.

Customise Draw-on logo animation →

What this won't do

Two honest limits, since a tool that only tells you what it can do isn't useful for deciding whether to use it. There's no CSV or spreadsheet import — rows are typed by hand or filled by the AI data assist, which is fine for the handful of rows a pie or bar race actually shows, but a real limitation if your dataset lives in a spreadsheet with hundreds of rows and you wanted to point a file at it. And there's no pyramid or funnel chart yet — pie, donut, bar race, bar chart, progress ring, stat cards, count-up and bullet reveal cover most of what a short-form chart needs, but not that shape.

If your chart needs either of those, a spreadsheet-native tool or a dedicated funnel builder will serve you better. If it doesn't, this is a faster path: no signup, no watermark, and — for the web case specifically — the only export among the tools we checked that isn't a video. See the animated bar chart and count-up guide for the two chart types this article doesn't cover.

More from the blog