Free · No watermark · No signup · Data stays local

Bar chart race generator

Paste a spreadsheet and get an animated ranking video — smooth overtakes, a running period counter, your own colours. Export video or a single PNG frame.

Paste your data

First column = the label. Every column after it = one period, named in the header row. Copy straight out of Excel, Google Sheets or a CSV.

Or start from a sample — each one loads its own labels, units and pacing:

Figures are rounded public approximations for demonstration, not a data source. “Revenue by product” is invented.

🔒 Parsed and rendered in your browser — unpublished numbers are safe here.

What people race

📈

Business metrics

Revenue by product line, signups by channel, tickets by team — the monthly update that people actually watch to the end, rebuilt in a minute from the same spreadsheet.

🌍

Public data stories

Populations, emissions, league tables, box office, chart positions. The format built its audience on exactly this kind of long historical series.

🎮

Communities and creators

Subscriber counts, leaderboard standings, tournament points, streamer hours — anything where the interesting part is who overtook whom.

Getting the data into the right shape

The layout is deliberately the one a spreadsheet already has. Each row is a thing that gets ranked and each column after the first is a moment in time:

Country2000200520102015
United States10250130401505018240
China12102290609011060
Japan4970483057604440

Select that range in Excel, Google Sheets or Numbers and paste it in — tab-separated data from a spreadsheet, comma-separated CSV and the semicolon-separated CSV that European locales export are all detected without you choosing anything. Currency symbols, percent signs and thousands separators inside the cells are stripped, so $1,204.50 reads as a number.

Two habits save most of the trouble. Blank cells inherit the previous period's value rather than dropping to zero, which is almost always what you want for a cumulative series but not for a per-month one — if a genuine zero belongs there, type the zero. And if a row is missing its earliest values entirely, it simply enters the race when its numbers begin.

When a race is the right chart, and when it is not

A bar chart race is a rank-over-time chart. It is superb at one specific thing: making an overtake feel like an event. If your story is "these two swapped places in 2019 and never swapped back," the format tells it better than anything else, because the reader watches the moment happen rather than reading it off a legend.

It is a poor choice for almost everything else, and it is worth being honest about why. The animation costs the viewer twenty to thirty seconds to deliver what a line chart delivers at a glance. Absolute magnitudes are hard to compare because the axis rescales as the leader grows. Anything below the top ten is invisible. And a series where nobody ever overtakes anybody produces a video of bars getting longer, which is the most common way these end up boring.

So the test before you make one: does the ranking actually change? If you can watch the preview and name the moment something interesting happened, the format is earning its runtime. If not, a static line or slope chart will serve the audience better — and the PNG export here will give you a clean frame for it in the meantime.

Settings that change how it reads

  • Speed. 1.0 to 1.5 seconds per period is the sweet spot for yearly data. Faster than 0.6s and the eye cannot track a swap; slower than 2s and the video overstays. For monthly data over several years, go fast — 0.3 to 0.5s — because there are many more steps.
  • Bars shown. Ten is the conventional choice and it is conventional for a good reason: it fills a 16:9 frame with bars still thick enough to carry a label. Twelve is the practical ceiling for a phone screen; above that, use a taller format.
  • Format. 16:9 for YouTube and presentations, 9:16 for Shorts, Reels and TikTok, 1:1 or 4:5 for feeds. The vertical formats fit fewer readable bars, so drop the count when you switch.
  • Prefix and suffix. These label the unit — $ in front, M, % or k after. A number with no unit is the most common flaw in a chart posted to social media, where there is no axis to explain it.
  • Colours. Twelve palettes, from Vivid and Neon through to Corporate, Earth and Grayscale, plus From my colour…, which takes one brand hex and builds a readable set of steps around it. Whichever you pick, a category keeps the same colour for the whole race, because a bar that changes colour mid-overtake is impossible to follow.
  • Period counter. The oversized year in the corner is not decoration. It is the only thing telling a viewer where they are in time, and numeric periods count up smoothly between steps rather than snapping.

How the animation is produced

Between any two periods the values are interpolated with an ease-in-out curve, so a bar accelerates away from one number and settles into the next instead of sliding at a constant rate. Ranking is then computed from those interpolated values, every frame — which is what makes an overtake happen at the exact moment the two lines genuinely cross, rather than at the next step in the data.

Vertical position is deliberately not snapped to the rank. Each bar's row position chases its target rank a fraction of the distance per frame, so a swap plays out over several frames as one bar sliding past another. That single detail is most of the difference between an animation that looks professional and one that looks like a slideshow.

Rendering happens on a canvas and the video is captured from that canvas by the browser's own recorder, in real time — twenty seconds of video takes twenty seconds to record. Nothing is uploaded, which is the practical reason to use this with revenue, headcount, pipeline or any other numbers you would not paste into someone else's web service.

Your dataset and every setting are kept in this browser, so next month's update is a paste over the old data and one click. That is the workflow the tool is built around: the first race takes a few minutes of fiddling with colours and speed, and every one after that takes about thirty seconds.

Bar chart race FAQ

How should my data be laid out?

One row per thing being ranked, one column per period. The first column holds the label — a country, product, team or channel — and every column after it is a point in time, with the period name in the header row. Paste it straight out of Excel, Google Sheets or Numbers; tab, comma and semicolon separated data are all detected automatically.

How many periods do I need?

At least two, but a race only becomes interesting somewhere around eight to ten. Values are interpolated between periods, so ten yearly columns already give a smooth video. Monthly data over several years produces the smoothest motion of all, and you do not need to fill every cell — blanks carry the previous value forward.

Is my data uploaded anywhere?

No. Parsing, animation and recording all happen in your browser, which is what makes it safe to use with unpublished revenue, headcount or internal metrics. The data is kept in this browser's local storage so it is still there next time, and clearing site data removes it.

How long does the export take?

The same as the video length, because the browser records the canvas in real time — a 20-second race takes 20 seconds. Keep the tab visible while it runs, since some browsers throttle canvas capture in a hidden tab.

What is the difference between this and a normal bar chart?

A bar chart race shows rank changing over time. It is worth using only when the ordering itself is the story — who overtook whom, and when. If the interesting part is the shape of the trend rather than the rank, a plain line chart communicates it better and takes a reader two seconds instead of twenty.

Can I get a still image instead of a video?

Yes. "Save frame as PNG" exports whatever the canvas currently shows at full resolution, which is useful for slides, reports and posts where video is awkward. Scrub the preview to the moment you want first.

Why do bars sometimes slide off the bottom?

Only the top N rows are on screen at any moment. When a row falls out of the top N it fades and slides off, and it slides back in when it climbs again. Raise the Top N setting to show more rows at once — though past about twelve, bars get too thin to read on a phone.

Can I use my own brand colours?

Yes — choose “From my colour…” and pick one hex. The tool builds a set of distinguishable steps around that colour, keeping the hue family so the whole chart still reads as your brand rather than as a rainbow. There are also twelve ready-made palettes, including Corporate, Earth, Pastel and Grayscale for reports that need to stay sober.

Where does the sample data come from?

The samples are rounded, publicly reported approximations chosen to demonstrate the format — browser share, tech market value, streaming subscribers, language popularity, city populations and GDP — plus one invented business dataset. They are for trying the tool out, not a source to cite. Each one loads with its own title, units, speed and bar count, which is the part worth copying when you set up your own data.

What video format do I get?

Chrome and Edge export MP4 where supported and otherwise WebM; Firefox exports WebM; Safari exports MP4. Every major platform accepts WebM on upload, and any free converter turns it into MP4 in seconds if a desktop editor in your workflow insists on it.