Customizing your line chart

After uploading your data, you have multiple options to enhance the quality and storytelling qualities of your line chart through customization options. 

In this tutorial we describe how to  make a beautiful chart in three steps. You will learn the various options Datawrapper provides to create an outstanding, narrative with just one element in your publication. Line charts can be the basis for a complete article, specifically when you report about a development over time. 


We will go through three tabs in step 3: Visualize to change the appearance of ou chart: " Refine", "Annotate" & "Design". In the "Refine" and "Annotate" tab, you can resize the chart, to make it wider or taller. To do so, click, hold, and drag the arrow in the lower right corner to scale the chart window.

1

Refine

Configure x-axis

In the "Refine" tab, you will see five panels. In the first and second panel, you can  configure the x-axis and y-axis. Let's start with the x-axis. For this axis, you should select the column in your data that has the time data (dates, years, time stamps, etc.). We choose the column "Quarter". These are the other settings in the first panel:

  • Custom range: Maybe you want to show another time range than the one you see. You can extend your time range (e.g. if you have data for the years 2000 to 2016, you could extend the range to 1990 to 2020), but you can't limit the time range. Datawrapper will always should the whole time range that it can find in your data. Even if you choose the time range 2013 to 2016, our tool will still show you the data (and therefore the time range) between 2000 and 2016. If you want to limit the time range, you need to delete data, e.g. in step 1: Upload data.
  • Custom ticks: Here you can decide which ticks you want to see. If you type in "2000, 2005, 2006", only three gridlines will appear at the x-axis positions 2000, 2005 and 2006. 
  • Tick format: Here you can decide which kind of ticks you want to see. We have quarters data and two options in the drop-down: "2015 Q1, 2015 Q2" and "2015, Q2, Q3". If we choose the first option, we will see ticks like "2015 Q1" and "2016 Q4" below our axis. Datawrapper won't display ticks for each of our quarters, because the space is too limited to do so. A better idea is the "2015, Q2, Q3" option: This will display just years below the axis (2014, 2015, 2016 etc.), but we will see the quarters in the tooltips: "2014 Q1" for example. 
  • Grid lines: This setting is straightforward: Do you want to show or hide the y-axis gridlines, or just show the marks? 

For our chart, the panel looks like this at the end: 


Configure y-axis

The settings in the second panel are very similar to the settings in the first one. Here are the ones that are no the same:

  • Scale: By default, your linear chart will always appear on a linear scale, where the difference between 1 and 2 is as big as the difference between 100 and 101 and 1000 and 1001. However, if you have important differences in your small numbers and large differences in your big numbers, a logarithmic scale might be the better alternative. If you choose it, the difference between 1 and 10 will become as big as between 0.1 and 1 and 1000 and 10,000. 
  • Custom range and custom ticks: Explained above.
  • Number format: Here we can decide how our values are shown in the tooltips. Here are three examples:
    • Choose the number format "123.4k" if you have big numbers like "1,303,428" that you'd rather want to display as "1.3m"
    • Choose the number format "0.0" if you have very detailed numbers like "0.1922302" that you'd rather want to display as "0.2"
    • Choos the number format "0%" or "0.0%" if you have a number that is a relative number. This setting will add a percentage sign. 
  • Grid lines: Explained above.
  • Grid labels: Here you can decide on the design of your grid labels. Should the stand outside or inside, or should that change depending on the available space ("automatic"?). You can also decide if the grid labels should stand left or right of the chart.

For our chart, the panel looks like this at the end: 

Customize lines

The most important setting of the panel "Customize lines" is that we can choose colors for our line. We can choose one color for all our lines (click on the color panel next to  "Base color" to change the default color) – all lines will then appear in this color or its shades. We can also adjust the colors manually for each line. To do so, click on "customize colors" next to the base color:

Below, we can define the width and style of all our lines by clicking on the preview lines next to the line labels:

You can also see that we can change the interpolation – meaning, how the lines are connected between the data points. To read more about when to choose which interpolation, visit our blog post.

Labeling

In this fourth label, we can decide where the line labels ("iPhone", "iPod" etc.) should stand: On the top, on the right, or shouldn't the be displayed at all? The last option can be useful if you want to directly label the lines with annotations (which you can set in the next tab, "Annotate"). 

We decide to display the line labels on the right, and can now also decide if we want to use the line color for the labels and how much space the labels should have at the right: 

Customize symbols

In the last panel, we can decide if we want to use little circles/triangles/squares etc. to highlight each data point, or just the beginning and/or end of our lines: 

These are all the options you can find in the Refine tab. Let's move on to the Annotate tab. Here you'll find three options: "Annotate your chart", "Text annotations" and "Highlight value ranges".


2

Annotate

Annotate your chart

If you've created a Datawrapper chart or map before, you already know this feature. Here we can give your chart a title, a description, add notes and a source:

  • We recommend using the title to tell your readers what's interesting about this chart – the one key statement that you want to show on this chart, e.g. "Unemployment highest in the south"
  • The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
  • Think of notes as footnotes, where we want to specify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
  • The source name will give our readers the information about how trustworthy our data is. Does it come from a government institution or another trustworthy organization? The source URL lets our reader dig even deeper and have a look at the underlying data themselves. Both, source name and source URL, should be filled out on every map or chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017

Text annotations

Our text annotations feature lets you set text everywhere on your chart. You can type text into the text field and then place it with the little arrow that's left of the text field directly on the chart:

If you'd like to learn more about this powerful feature and how to precisely set and format annotations, visit this tutorial. 

Highlight value ranges

If we want to draw our readers attention to one specific time range in our chart, this tool is perfect. It lets us set greyed-out ranges directly in our chart. To do so, click on "Add range highlight". Now simply select a starting and ending point of the range by clicking in the chart. If you want, you can also change the opacity of the highlighted range:

Afer explaining the Annotate options, there's only one tab left: Design. 


3

Design

In this last step, you can select a preset layout and enable social sharing functions to spread your work. 

  • Users of the free plan or Single users have two options: One layout with and one without the "Get the data" link
  • Users of Datawrapper Team are able to select a custom layout here 
4

Publish

In this last step you can select a preset layout and enable social sharing functions to spread your work. Click on " Publish" and you'll be directed to the "Publish & Embed" page.

The best way to use a Datawrapper chart is by embedding it directly in your website. To do that, click the big blue button that says " Embed chart on website". 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. Click here for more information on the different pricing plans of Datawrapper.

Still need help? Contact Us Contact Us