OneTaskBy Tim King · Updated
Bump Chart Maker
Rankings Over Time, Download SVG or PNG Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Bump Chart Maker works
This bump chart maker shows how rankings change. A bump chart shows how the ranking of a set of items changes over time: one line per item, one column per period, and the line bumps up or down as the item overtakes or is overtaken. It is the chart behind league tables, chart positions, market share leaders and search rankings. Paste a table with names down the side and periods across the top, choose whether the cells are already ranks or values to be ranked, and download the result as SVG or PNG. Nothing is uploaded.
Bump chart maker: writing the table
The first line is a header: the name column followed by one column per period, such as years, quarters or match weeks. Each following line is one item with a value under every period. Numbers may carry thousands separators or a percent sign. Tabs work in place of commas, so a block copied from a spreadsheet pastes straight in.
Ranks or values
If your cells are already positions, switch the setting to Ranks and the page draws them as given. If the cells are values such as sales, points or scores, choose whether higher or lower is better and the page ranks each column for you, so first place goes to the largest or the smallest figure. Hovering a line shows the rank and, for ranked values, the value behind it.
Reading the chart
Rank one is at the top and each dot carries its rank number. A line climbing from left to right is an item gaining position; a line falling is one being overtaken. Names are printed at both ends in the line colour so you can follow an item across without a separate legend. Lines crossing each other are the story of the chart: every crossing is one item passing another.
Stats
The panel names the current leader and the items with the biggest climb and biggest fall between the first and last periods, measured in places gained or lost. Those two names are the usual headline for a ranking story.
Exporting
Download SVG gives a vector file with the names as editable text, ready for Inkscape, Illustrator or Figma. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard. Everything is drawn in your browser; the table never leaves your machine.
FAQ
What happens when two items tie?
Ties are broken by the order of the rows, so the item listed first takes the higher rank. If tie order matters to you, sort the rows so the item you want on top comes first.
Can I show values instead of ranks on the vertical axis?
No; a bump chart is about position, and the spacing is always one place per row. To plot the values themselves over time use the line chart maker, which keeps the vertical scale in the original units.
How many items and periods work well?
Up to about ten items and a dozen periods stays readable. Beyond that the lines tangle and the names at the ends start to collide, so trim the table to the items or periods that matter.
Does every row need a value in every column?
Yes. A missing cell has no rank, so the page reports the line and column rather than guessing. Fill the gap with a last-place value or drop the item if it was not present in that period.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Slope Chart Maker
Paste before and after values; download a slope chart as SVG or PNG.
Line Chart Maker
Paste CSV, get a multi-series line graph; download SVG or PNG.
Bar Chart Maker
Paste CSV, get a grouped or stacked bar chart; download SVG or PNG.
Timeline Maker
Paste date and event rows, download a timeline as SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.