React chart example
Bump chart
Track how rank changes over time across a set of competitors.
What is a bump chart?
A bump chart plots rank rather than value, with one line per series and the axis reversed so first place sits at the top. Lines cross whenever two series swap places.
When to use it
Use it for league tables over time — the five largest emitters by year, product popularity by quarter. It shows overtaking clearly, which a value chart buries. Use a line chart instead when the size of the gap between competitors matters, because rank hides magnitude entirely.
Design tips
Reverse the axis so rank one is at the top, and label ranks, not values.
Mark each observation with a point; rank data is discrete, not continuous.
Label series at both ends — the interesting ones are those that moved.
Build this chart in React
Compare with
Use when only the starting and ending ranks matter.
Use when value differences matter more than rank changes.
Graphy Chart SDK
Add Graphy’s bump charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.