Customizing your area chart

After uploading your data and choosing an area chart (covered in this article), there are many ways to customize it in step 3: Visualize in the Refine and Annotate tab. This article explains all those ways you can tweak your area chart.

Contents

1. Refine: Horizontal axis
2. Refine: Vertical axis
3. Refine: Customize areas
4. Refine: Labels
5. Refine: Appearance (plot height)
6. Annotate
7. Layout & Publish

Let's start with the options in the Refine tab. In the first and second panel, you can configure the horizontal axis and vertical axis.

Refine: Horizontal axis

First, 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 "Year" for our horizontal axis.

These are the other settings in this panel:

• Custom range: Here you can show a time range other than the one that is automatically displayed. By default, the horizontal axis spans from the earliest to the latest date – but you can decide to cut off data points or extend your axis here. For example, you can decide to only show data points between 2010 and 2018, even if the data goes from 2000 to 2022.
• Custom ticks: Here you can decide on the number of ticks you want to see. If you type in "2000, 2005, 2006", only three gridlines and grid labels will appear on the horizontal axis.
• Date format: Here you can decide which kind of ticks you want to see. We have yearly data, and the date format "2015, 2016" works well for us. Datawrapper won't display ticks for each of the years, because the space is too limited to do so. Learn more about displaying dates in this article.
• Grid: Here you have three options: Lines (to see the vertical gridlines going from the top to the bottom), Ticks (to only have short lines below the x-axis), and Off (to not show the gridlines at all). Whichever option you choose depends on your personal preference and how much ticks you show on the chart.

Here's how our horizontal axis looks like in the final chart with the settings you can see in the last screenshot:

Refine: Vertical axis

The settings for the vertical axis are similar to those for the horizontal axis:

• Custom range lets you define the lowest and highest value on the axis. By default, the vertical axis spans from the lowest to the highest number – but you can decide to cut off data points or extend your axis.
• Custom ticks: Decide on the number of ticks you want to see. If you type in "5000,7000", only two gridlines and grid labels will appear.
• Number format: Decide how your values shown up in the grid labels. You can learn more about number formats in this Academy article.
• Grid: This is the same as on the horizontal axis. Here, too, you have three options: Lines (to see the horizontal gridlines going from left to right), Ticks (to only have short lines next to the y-axis), and Off (to not show the gridlines at all).
• Labels: Define how gridline labels are positioned: Inside places the labels on the gridlines, Outside places them next to the gridlines. Choose Off if you don't want to show any labels at all. With Auto, the position is automatically adjusted to the limited space available on mobile. You can also choose if you want the y-axis to show up on the left or the right side of the chart.

Refine: Customize areas

The most important setting of this panel is choosing colors for your areas.

You 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.

You can also adjust the colors manually for each area. To do so, click on Set colors next to the base color:

Below the color settings, you can change the opacity of your areas (having an effect on how much the gridlines shine through) and interpolation. Interpolation refers to how Datawrapper draws lines between the available data points. To read more about when to choose which interpolation, visit our blog post.

There are two more options here:

• Sort areas: Decide if you want to keep the order in which you uploaded your columns in, or show the smallest first (meaning, smaller areas on the bottom of the chart) or the largest first (bigger areas are on the bottom).
• Stack areas: Stacked means that all areas are on top of each other. If you turn this off, the areas will sit behind each other instead. This is harder to read and only a great option in a few cases, so stacked areas are the default in Datawrapper. You can also choose to stack areas to 100% – so that your audience can compare the share of your categories – or to separate the areas with lines in a certain line color. Here's how a 100% area chart looks like:

Refine: Labels

In this fourth panel, you can customize your color legend and tooltips.

By default, Show color legend is turned on. Think twice before you turn it off, since there's no other option out of the box to show your audience which of your areas mean what.

Stack labels means that your color legend item show up below each other instead of next to each other. This can be useful if you only have two or three areas with very long color legend labels. Here's how this looks like:

Reverse label order does exactly that: The first item in your color key becomes the last one, and the other way around.

You can also choose whether your audience should see tooltips when they hover over an area in the embedded version. If you turn tooltips on, you can change the date format and the number format to be differently from the horizontal and vertical axis.

Refine: Appearance (plot height)

The last settings in the Refine tab let you change the plot height. You can learn more about the available options in this article.

Let's move on to the next tab, Annotate:

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.

You can then add and customize text annotations anywhere on your area chart. Learn how to create text annotations here.

Finally, if you want to draw your reader's attention to one specific time range, the Highlight range tool is perfect. It lets you set semi-transparent colored overlays directly in your chart. To do so, click on Add range highlight. Now 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 & Publish

After adding text to our chart, only one tab is left in step 3: Visualize: The Layout tab. You can find all Layout settings explained in this Academy article. And once you're happy with your settings, it's time to publish! We prepared another detailed Academy article about publishing, embedding, and exporting your chart here.

And that's it! You successfully customized your first area chart. This is how it looks in the end: