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. The first iteration of your chart will probably look rough. 

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

Before you make any detailed changes, make sure that the box " Stack areas" is marked. By stacking an area chart, you can show the part-to-whole realationship of each category. We will offer a more detailed guide on area charts soon.

Now you want 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 a next step, we need to adjust the y-axis by extending the its range. We do not want the y-axis to stop at 15 obfuscating the maximum values. By entering a maximum custom range value, we can explictily extend the y-axis so that it show values above those automatically created.

  • Set the max value of "Custom range" to 20

 Now we want to work on the areas. Click " customize colors" to colorize each area individually. We want to highlight the area that represents one of the columns of our dataset (Digital).

  • 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

To further set the areas apart from each other, we add a separating line between each area.

  • Tick the box "Separate areas with lines"
  • Choose a line color that clearly accentuates the areas' borders

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.

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