Lines tracking rank position over time periods. Crossings show ranking shifts.
A free, animated ranking bump chart you can read here or embed on any website, from Scrollchart.
Ranking Bump Chart
A bump chart plots rank (not raw value) on the vertical axis against time on the horizontal axis. Each entity is a colored line, and rank 1 sits at the top. When lines cross, one entity has overtaken another: the crossing point is the moment of the rank change.
Using rank rather than absolute value keeps entities with very different magnitudes visible on the same chart. A country's GDP ranking across decades, a sports league table across seasons, or a product's app store ranking across months all fit the format. The stories the chart tells are about relative position and momentum: who is climbing, who is falling, and when overtakes happened.
Editorial pages where a quick visual replaces a wall of text
Content-marketing posts that need a clean, branded illustration
Source & accuracy
This ranking bump chart is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.
Tracking rank movements over time
A ranking bump chart shows multiple line segments, each representing one item's rank position across time periods. When lines cross, it means two items swapped rank. The slopes of the lines encode the speed of change: a steep slope means a rapid rise or fall in rank, while a flat line means holding position.
Use this format when you care more about relative rank order than absolute values. Netflix subscriber counts or sports team standings over a season are natural fits.
Clarity advantage over line charts of raw values
If you plotted raw values instead, you'd need multiple axes or careful scaling to show items with wildly different magnitudes on the same chart. Rank removes that complexity. All items occupy the same vertical space from position 1 to N, making comparisons instant and unambiguous.
Embed this diagram
Add this animated ranking bump chart to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.
Reference
What this is
A free, embeddable, animated ranking bump chart for any website.
Who uses it
Data journalists, Researchers & academics, Content marketers, News organizations.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.
Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback -
see the WordPress plugin page for details. Any format keeps
the same Core Web Vitals profile and the same explainer text.
By embedding, you acknowledge the diagram and explainer text are served from scrollchart.com and may be updated from time to time to reflect new research or to link to relevant sources within the explainer.
Frequently asked questions
Where can I get a free animated "Ranking Bump Chart" for my website?
Scrollchart provides "Ranking Bump Chart" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a ranking bump chart in a blog post or article?
Paste the one-line HTML snippet from the Scrollchart diagram page into your post editor. It works in WordPress, Webflow, Ghost, and plain HTML with no plugin required. The animated diagram and its explainer text load from scrollchart.com and render directly in your page DOM.