Area Chart Examples
Area Chart Examples

Area Chart Examples

What is an area chart

Area charts are very similar to line charts but the area between the axes and the line is emphasized with colors. An area chart is also commonly used for visualizing trends over time and in that sense area and line charts can be used interchangably. However because area graphs use color to fill the plot area they are very different in how our audience will perceive and read the data area charts visualize.

In that sense area charts have the ability to:

  • clearly emphasize the rize and fall of our data values at certain points in time
  • show total trends as well as trends by subcategory
  • show a trend to each part of a whole as well as the relationships between the parts

Types of area charts

There are three main types of area charts

  • simple are chart
  • stacked area chart
  • 100% stacked area chart

Using these three types of area chart there are several area chart examples that you can build

Area chart examples

Single area chart

In this example we are looking at a single series and the trend of data points related to the series. In 2020 there was a significant peak in Google searches for “how to make a face mask” during lockdown. Area chart works great in this example since there is a significant rise and fall of our data values. With the area filled with color our audience will easily focus on the anomaly of the trend.

Area chart examples - single area chart

Multiple categories area chart

Area charts work great and can open insights if used with multiple categories but with caution. Since that area below the line is filled with color and the data series overlay each other, one can hide important data points of the other. Here are some examples:

Area chart example - multiple categories

While the above chart shows the big picture, it doesn’t properly visualize one of the categories and the data trend. Adjusting the colors overlay can help with this issue.

Area chart example - multiple categories

Stacked area chart

A stacked area chart can be a better approach when working with multiple categories. But again with caution. Here is an examples:

Area chart example - stacked area chart

Stacked area charts ultimately show the overall trend broken down by each component. In the area chart example above it looks like all three digital channels experienced a spike in October. In reality it was only Organic search that reports an increase which contributes to the overall website traffic increase. The reason for this is because each component of the stacked area chart does not start from 0 but it is stacked on top of the previous component. Stacked area charts may be hard to analyze but they may serve a purpose if we want to focus on the overall data values and what the contribution of each compnent is towards this overall value. Stacked area charts are not to analyze a trend by category.

100% stacked area chart

I love 100% stacked area charts when working with only two categories and I want to highlight the rate between the data values. For example we can plot website visits vs website conversions. The line between the two components of the area chart will visualize the conversion rate.

Area chart example - 100% stacked area chart

With 100% stacked area charts the category that is visualized at the top of the chart is turned upside down. That is the trend for this component category is to be viewed at the bottom of the component. See an example below:

Area chart example - 100% stacked area chart

Also, remember with 100% stacked area charts the vertical axis is in percentages and the data values are measured in percentage of total.

Further reading

Other resources