React chart example
Bar chart race
Animate a ranked bar chart through time so positions change on screen.
What is a bar chart race?
A bar chart race is a ranked bar chart that steps through periods, with bars re-sorting and resizing as the ranking changes. The movement carries the story.
When to use it
Use it for presentations and social posts about changing leadership over a long period. It is a narrative device rather than an analytical one — a reader cannot take values off a moving chart. Use a bump chart when the re-ranking needs to be studied rather than watched.
Design tips
Show the period prominently and let it lead the animation, not trail it.
Keep the value axis rescaling smooth, or every frame reads as a jump.
Provide a static fallback for readers with reduced motion enabled.
Build this chart in React
Compare with
Use when re-ranking should be studied in a static view.
Use for one precise ranking without change over time.
Graphy Chart SDK
Add Graphy’s bar chart races to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.