OneTaskBy Tim King · Updated
Slope Chart Maker
Compare Two Points in 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 Slope Chart Maker works
This slope chart maker compares items at two points in time. A slope chart, or slopegraph, compares a set of items at two points in time: one column of values on the left, one on the right, and a line for each item joining them. The slope of each line shows the change at a glance, and the vertical order shows the ranking at each end. Paste rows of name, before and after, and the page draws the lines, colours rises and falls, nudges labels apart so none overlap, and lets you download SVG or PNG. Nothing is uploaded.
Slope chart maker: writing the rows
The first line is a header with three names: the item column, then the two period names such as 2015 and 2025 or Before and After. Those two header names are printed above the columns. Each following line is one item with its two values. Numbers may carry thousands separators or a percent sign. Tabs work in place of commas, so three columns copied from a spreadsheet paste straight in.
Reading the chart
Each item is a line from its left value to its right value, with the name and figure printed at both ends. A steep upward line is a big rise, a flat line no change, and lines that cross mean the ranking changed. Where several items land close together, labels are pushed apart just enough to stay readable while the dots stay at their true positions; hover a line to see the two values and the difference.
Colours
By direction colours rising lines with the second palette colour, falling lines with the first and unchanged ones grey, so the overall picture reads as a count of ups and downs. By name gives each item its own palette colour, which is better when the audience needs to follow a specific item across the chart or when you have only a handful of rows.
Stats
The panel counts how many items rose and fell and names the biggest change. For a report, those three numbers plus the chart usually say everything a table of before and after values would say, in a fraction of the space.
Exporting
Download SVG gives a vector file with the labels 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 values never leave your machine.
FAQ
Can I compare more than two periods?
No; a slope chart is defined by having exactly two. For three or more points in time use the line chart maker, or the bump chart maker when ranking matters more than the values.
Why are the labels not level with the dots?
When two values are within a few pixels of each other their labels would print on top of each other, so the lower one is nudged down. The dots and lines stay at the exact values; only the text moves.
Do both columns need the same unit?
Yes. The chart uses one vertical scale for both sides so the slopes are comparable. Mixing units, or a count on one side and a percentage on the other, would make the slopes meaningless, so convert both to the same measure first.
How many rows can I add?
There is no limit and the drawing grows taller with the count. Beyond about twenty rows the lines become a tangle, so consider showing only the items that changed most.
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
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.
Bullet Chart Maker
Paste actual and target rows; download bullet graphs as SVG or PNG.
Waterfall Chart Maker
Paste label and change rows; download a waterfall chart as SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.