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.
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:
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.
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:
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.
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:
Also, remember with 100% stacked area charts the vertical axis is in percentages and the data values are measured in percentage of total.