Online Tool Store
· 4 min read
How to Make a Bar Chart Race People Watch
Manesh Jayawardhana
CIO & Co-founder
Bar chart races had a moment, then a backlash, and both were slightly overdone. They’re not a serious analytical chart, and they were never meant to be. What they are is the only chart format people voluntarily watch for ninety seconds.
That’s worth something. If your finding is “the ranking changed dramatically over eight years”, a race communicates it to an audience that would scroll past a small multiples grid.
What a race actually communicates
A bar chart race shows rank changes over time. Bars reorder as values change, and the drama comes from overtaking — the moment one bar passes another.
That’s the whole message: who was ahead, when that changed, and how quickly. It’s a narrative format.
What it doesn’t do is let anyone read values accurately. Bars are moving, labels are sliding, and by the time you’ve read a number it’s changed. If your audience needs to know that Brand D reached 4,200 units in Q3 2023, the race won’t tell them and shouldn’t try.
The honest use is a race for the story and a static chart underneath it for the numbers. That combination gets attention and then supports it, which is more than either does alone.
Why people get stuck here
- Too many bars. Fifteen or twenty bars means nothing is legible while it’s moving.
- Too fast. Under about a second per period, labels don’t register.
- Sparse data. Gaps make bars jump rather than slide, and the effect looks broken.
- Treating it as analysis. A race presented as the analytical output invites the criticism it usually gets.
What a good race looks like
Ten bars, maybe twelve
Show the top ten and let items enter and leave. Anything below that is invisible while moving anyway, and each extra bar costs legibility for all the others.
About a second per period
Fast enough to hold attention, slow enough to read a label. Twenty-four quarters at one second each is a twenty-four-second animation, which is roughly the attention budget you actually have.
Evenly spaced periods with no gaps
Interpolate or fill missing periods before animating. A dataset where some items appear only in alternate periods produces bars that flicker in and out.
| Setting | Sensible Value | If You Ignore It |
|---|---|---|
| Bars shown | Top 10 | Nothing is readable in motion |
| Pace | ~1 second per period | Labels don’t register |
| Data | Every item, every period | Bars jump instead of sliding |
| Static companion chart | Always include one | Audience can’t check any number |
Common mistakes to avoid
- Animating a dataset where the ranking barely changes — a race with no overtaking is just a slow bar chart.
- Using a colour per item across thirty items, so the palette becomes indistinguishable.
- Omitting the date label, which is the one piece of context that makes the movement mean anything.
- Exporting at a size where the labels are unreadable on a phone, which is where most people will watch it.
- Presenting the race as the analysis rather than as the introduction to it.
How to do it with Bar Race Chart Maker
The Bar Race Chart Maker builds the animation in your browser, with the bar count capped for readability.
- Provide one row per item per period, with a numeric value.
- Limit visible bars to the top ten or so.
- Set the pace to around a second per period and watch the whole thing once.
- Check that a date or period label is always visible.
- Pair it with a static chart for anyone who needs the actual numbers.
Other chart builders that run locally are in the tools directory.
Frequently asked questions
Are bar chart races bad practice?
They’re bad at precision and good at attention. Used as a narrative device with a static chart alongside, they’re a reasonable choice. Used as the sole evidence for a claim, they deserve the criticism.
Why does mine look jumpy?
Usually sparse data. Races look smooth when periods are evenly spaced and every item has a value in every period. Gaps cause bars to appear, disappear and leap.
How fast should it run?
About a second per period. Faster and labels become unreadable; much slower and people stop watching. Twenty to forty seconds total is the practical range.
Final thought
Make the race if the ranking genuinely changes. If the leader never moves, you’ve animated a static chart — and the audience will notice within five seconds.