How to create a slope chart
A slope chart (also called slope graph) shows developments between two points, e.g. between two dates. Slope charts can be seen as simplified line charts that just show the start and end point of each line. If we're not interested in the details of how a line evolved, but just want to see in which direction it evolved, slope charts are a great choice. Especially if we have many lines, they can also look less cluttered than a normal line chart.
In this tutorial, we will create the following slope chart with Datawrapper's line chart feature.
There are four steps in each Datawrapper chart creation pipeline: Upload Data, Check & Describe, Visualize and Publish & Embed. We will go through all of them:
Upload data
In this first step, you can copy & paste data from Excel or the web, or upload your own CSV files. Here is the data for our chart up there:
| Year | Cat | Dogs | Horses | Mice | Cows | Pigs | Sheep | Goats |
| 2005 | 50 | 40 | 30 | 34 | 45 | 39 | 25 | 41 |
| 2015 | 34 | 31 | 39 | 44 | 47 | 50 | 40 | 46 |
Note how the data set should be structured:
- One header row containing labels. These will be shown at the side of the final chart ("Dogs", "Mice", etc.). Each column will turn into a line. Our eight columns will result in eight lines/"slopes".
- The first row defining the values on the left side of the slope chart for all variables.
- The second row defining the values on the right side of the slope chart for all variables.
The first column can contain some kind of date or year data, but opposite to a normal line chart, it's not necessary.
This is how the data looks like once we copied it in step 1, Upload Data:
After finishing this step, click "Proceed" to get to the second step, Check & Describe:
Check & Describe
Here, your data should look like above. If your first column contains dates (like years, days, weeks), Datawrapper will tell you that it detected the data format and will color it green. Numbers will appear in blue. To learn more about data column type detection, visit this article.
Finally, make sure that the box "First row as label" is ticked so that Datawrapper correctly assigns the values to the labels. Click on "Proceed" and Datawrapper will take you to the next step:
Visualize
In this step, you can see four tabs. In the first tab, "Chart type", we see a grid of chart types. To create a slope chart, we want to choose the chart type "Lines":
In the second tab, "Refine", we can configure our chart. To learn more about each feature, visit the article "Customizing your line chart". Here we will talk about the settings that will define a slope chart:
First, you want to make sure that your horizontal axis ticks only show the start and the end date. To do so, write your start and end date in the "Custom Ticks" field:
Regarding the vertical axis, you want to make sure that the grid labels are outside (you can also set custom ticks here, as we did for our chart):
The next panel, "Customize lines", let you set line width and colors, to make your statement pop out. We explain how to use these settings in the article that's linked above.
In the panel "Labeling", make sure that the line labels are set to the right (that's the default), and that the label margin is set to 0px:
In the last panel, turn on "Line symbols". Play around to choose a size for these symbols that works best for your chart design:
In the last two tabs, you can add annotations and choose the design for your chart. Visit the article "Customizing your line chart" to learn more about these features.
Click on "Publish" to get to the last step, "Publish & Embed".
Publish & Embed
Congratulations to your finished slope chart! In this last step, you can publish your work and decide how to share it with the world. The best way to use a Datawrapper chart is by embedding it directly on your website. To do that, click the big blue button that says " Publish Chart". Then, copy & paste the embed code snippet into your website or CMS. You can also download your chart as a PNG or PDF by upgrading to a paid Single or Team account.