Customizing your area chart

If you want to publish an area chart after uploading your data, you have multiple options to enhance the quality and storytelling qualities through customization options. 

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

1

Refine

Configure x-axis

In the "Refine" tab, you will see four 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 "Year". 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. There are only two different settings:

  • 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 area

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

Below, we can change the opacity, sort areas, separate areas with white lines and change the interpolation – meaning, how Datawrapper draws lines between the available data points. To read more about when to choose which interpolation, visit our blog post.

We can also choose to stack or unstack areas: Stacked means that all areas are on top of each other. If we deselect this setting, all areas will lay behind each other. This is harder to read and only a great option in a few cases, so "Stack areas" is selected by default in our tool.

And you can stack areas to 100 percent: Your chart won't show absolute values anymore, but relative ones. You can create a 100 percent area chart. Depending on your data, this might the more interesting chart:

Labeling

In this fourth and last label, we can decide if we want to display the area labels ("Solid fuel", "Liquid fuel" etc.) at the top or not at all. We can also decide if we want to not show tooltips:

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

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.

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 on 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