The Fine Line In a Gray Area: When to Use Line vs Area Charts

by Drew Skau 2 years ago Filed Under: Design

Line charts and area charts are very closely related. They are both good for time series data. They both show continuity across a dataset. They are both good for seeing trends rather than individual values.

But they can’t always be used interchangeably, as they do have a few subtle — but important — differences.

 
Line charts are good at showing multiple different series and comparing them against each other. They can support up to about seven lines in a static version; interactive versions can go higher.

Area charts are not as good at comparing between that many areas because they have problems with occlusion. In the example below, the line chart lets you see where all the lines are at all points, but the area chart has hidden parts.

 
These differences are mainly due to one simple change. Area charts show a filled area below the quantity line. This fill can obscure other data series that are on the same chart. One way to solve this occlusion problem is with transparency of the areas. Transparency works well with two or three different areas, but if used with too many areas, it turns into a muddy mess.

 
Because of this potential for occlusion, one frequent thing to do with area charts is to stack them. This is where part to whole relationships come in. The total vertical of a stacked area chart shows the whole, while the height of each different strip shows the parts.

There are two different ways to show this part to whole relationship, as well. The raw values can be stacked, showing how the whole changes over time, or the percentages can be stacked to show how the relationship between the parts changes over time.

 
Another, more subtle thing area charts can communicate is cumulativity. One example of this is population values. A line chart would be good for showing net change in population over time, while an area chart would be good for showing the total population over time. The filled area below the line can help to indicate that it is a physically countable amount, rather than an intangible rate.

If used carefully, the interplay between rates and quantity can be represented very well with a combination line and area chart. William Playfair does a great job of this in Exports and Imports to and from Denmark & Norway from 1700 to 1780. The lines in this chart represent gross imports and exports, while the areas between the lines represent net values. The relationship between the lines is what really matters in this chart, so he calls the areas out with labels and colors.

Exports and Imports to and from Denmark & Norway from 1700 to 1780

Browse more Economy infographics.

 
In short, while line charts and area charts may seem interchangeable, they have different qualities. Using the correct one is a subtle move, but it can make a big difference in the professionalism of your visualizations. Use line charts to compare several data series, or for individual intangible values like rates. Use area charts for multiple data series with part to whole relationships, or for individual series representing a physically countable set, or cumulative series of values.

 
Drew Skau is Visualization Architect at Visual.ly, and a countable PhD Computer Science Visualization student at UNCC, with an undergraduate degree in Architecture.