Customizing your line chart

If you want to publish a line chart after uploading your data you have multiple options to enhance the quality and storytelling qualities through customization options. The first iteration of your chart will probably look  rough. 

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. 

How can you create the annotations, colors used in the chart above?

1. Refine

The first thing you want to do is to configure the x-axis or y-axis and scale the size of the chart. 

  • Click, hold, and drag the arrow in the lower right corner to scale the chart window or manually determine the dimension of the chart by entering values in the boxes below the chart ("Resize to")

In this case, the x-axis looks fine but we need to configure the y-axis. Let's determine the dimension of the y-axis:

  • Enter "min" and "max" values in the fields of "Custom range"

In a next step, we need to adjust the y-axis by setting custom ticks. Without custom ticks, Datawrapper will adjust the x-axis and y-axis according to the dataset's values. This can lead to very detailed but convoluted graphs. By setting custom ticks, we define the interval between the horizontal grid lines. In this case, the x-axis looks fine but we need to configure the y-axis.

  • Set "Custom ticks" of steps of 20

Now we want to work on the lines. Click "customize colors" to colorize each line individually. We want to highlight the line that represents one of the columns of our dataset.

  • Select any element from the list; each element is named according to its label in the dataset
  • Choose a color via the drop down menu
  • Change the interpolation of the graphs by slecting one of the options via the drop down menu
  • Change the line width by clicking in "IPHONE"

The animated GIF below shows all these changes in action:

2. Annotate

In this tab you can edit the  titledescription (sub-title), and add notes. Make your data accessible and explorable by stating the source name and providing its URL.

For this example, we want to highlight a certain value range. 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. The GIF below shows this in action:

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