Customizing your line chart

Refine

Horizontal axis

In the "Refine" tab, you will see six panels. In the first and second panel, you can  configure the horizontal axis and vertical axis. Let's start with the horizontal 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". Some of the other settings in the first panel include:

• Custom range: Maybe you want to show another time range other 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 show 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 grid lines corresponding to these years will appear along the horizontal axis. 
• 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: Would you rather show vertical axis grid lines or hide them? Similar case for tick marks along the vertical axis, have them displayed or hide them altogether? 

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

Vertical axis

The settings for the vertical axis are very similar to the one in horizontal axis, though there are some additional features. Here's a brief description of each of these features:

• Scale: By default, your line 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: See ''Horizontal Axis'' above.
• Number format: Here we can decide how we want our values to appear 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", then you'd rather want to display as "0.2"
  • Choose 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: See ''Horizontal Axis'' above.
• Grid labels: Here you can decide on the design of your grid labels. Should the labels stand outside or inside, or should that change depending on the available space ("automatic"?). You can also decide if the grid labels should stand on the 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:

The interpolation feature allows you to control 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 they 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 at this stage, can also decide if we want to use the line color for the labels and how much space the labels should have in the margin at the right: 

You can also choose whether to show tooltips or not as well as the option to format your tooltips: 

Customize symbols

In the fifth 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: 

Fill area between lines

In the last panel, we can decide if any two lines will have a filled area between them. This section defaults to being empty. Simply click the "+Add area fill" button to add a shaded region. Select from which line to which line the area will fill. Then select the color and opacity. You can also set its own interpolation. Here we decide to fill the region between the iPhone and iPod to clearly show when and by how much iPhone sales overtook iPod sales:

Annotate

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.

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:

Layout

In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.

Publish

Congratulations you are almost finished! 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 (available to all users regardless of the type of subscription plan they have) or a PDF (available only to users of Custom or Enterprise plan). For more information on the different pricing plans, click here.