Area Charts
If you’ve worked with charts for even a very small amount of time, you will know that choosing the right chart is tricky business. And from your experience of figuring out which chart to work with, you’d know that this choice depends more on the kind of analysis you are targeting than the type of data you have. For example, let’s say you have the quarterly sales data for five years. If you want to facilitate a general comparison for your audience, you’d use a column or bar chart. But if you wanted to show the trend of how the sales values have changed over the years, you’d rather use a line chart or an area chart.
For this article, we’ll be talking about data visualization using the area chart—what is the area, why and where can you use the area chart, and the pros and cons of using the area chart.
Area charts are commonly used to showcase data that depicts a time-series relationship.
Information in an area chart is plotted on the x- and y-axis; data values are plotted using data points that are connected using line segments. Area charts are primarily used when the magnitude of the trend is to be communicated (rather than individual data values). To showcase this magnitude, the area between the line segments and the axes is highlighted by filling it with color.
A simple example
Take a look at the area chart shown below, showcasing quarterly product category-wise sales.
This area chart gives you a quick comparison of the trend in the quarterly sales of food and non-food products over the period of a year.
In a quick glance at this chart, it is easy to deduce the following:
- Q1: Non-food products’ sales are slightly more than food products’ sales.
- Q2: Food products’ sales are slightly more than non-food products’ sales.
- Q3: Food products’ sales show a slight dip from the Q2 sales and non-food products’ sales show a steep dip from the Q2 sales; food products’ sales show a significant growth over non-food products’ sales.
- Q4: Food products’ sales show a slight increase from the Q3 sales, non-food products’ sales show a comparatively higher increase; non-food products’ sales are still lower than food products’ sales.
However, there are also certain things about this chart that limit your analysis, placing stress on determining whether a chart is suitable for facilitating the intended data analysis.
Like we said earlier, this article focuses on the dos and don’ts of data visualization using area charts.
Variants of the area chart
Before we talk about the strengths and limitations of an area chart, we’ll take a look at the variants of this chart; this will come in handy when we discuss the strengths and limitations.
The area chart can be visualized in two ways:
- One with data plots overlapping each other
- Another with data plots stacked on top of each other
The example shown above is that of an area chart with overlapped data plots. To save you from scrolling, we’ll show the chart here again:
The chart shown below is an area chart with stacked data plots:
Ideal use-cases for area charts
You can use area charts in the following situations:
You need to do a part-to-whole analysis.
The distinctive feature of an area chart is the filling done between the line segments and the x-axis to emphasize the magnitude. When rendered with stacked data plots, the area chart serves well for a part-to-whole analysis of each category. For example, in the stacked area chart shown below, you can easily make out that food products contribute more to the total sales than the non-food products.
You need a simple comparison between the trend/proportion of each category.
One glance at the stacked area chart shown above gives you a clear understanding that while the food products’ sales have been consistent, the non-food products’ sales have shown a lot of fluctuations. While it is difficult to discern exact values using a pie chart, a quick glance certainly gives you an idea of the trend.
You need to know the magnitude of a change.
The filling between the line segments and the axis line facilitates understanding the magnitude, something which cannot be done using the line chart—a chart that is often argued to be better than the area chart (in quite a few places it is, but we will leave that discussion for another day).
You need to compare a small number of categories.
Be it either of the above mentioned two variants of the area chart, rendering multiple categories will make it difficult for a user to understand the chart.
In case of the chart with overlapped data plots, more the number of categories, more the overlapping, and consequently, lesser the visibility.
Take a look at the area chart shown below:
Is it as easy to analyze this was as with the one we first saw? It certainly isn’t.
Now take a look at the stacked chart shown below:
The stacked area chart is comparatively easier to read than the overlapped one. Yet, it certainly takes more effort in reading this one than it took for a chart with just two categories.
Therefore, the number of categories that you need to showcase and the variant of the chart that you want to use are both important in determining if you can use an area chart.
For multiple categories, you might want to use the line chart instead.
You need a simple comparison between trends and not exact values.
By now, you would have realized that you reading exact data values from an area chart is not something easily done. In charts with overlapped data plots, it is difficult to even make out where a data plot begins and ends.
While by setting colors and transparency to appropriate values, the overlapped data plots can be made readable, with stacked data plots the solutions are even more limited. In a stacked area chart, to deduce the value of a data plot, it has to be read with respect to the previous data plot. The human eye isn’t exactly trained to do that well.
To summarize the limitations from the discussion we had in the above section, you can avoid using area charts in situations where you need to compare multiple categories and exact data values.
Area charts are also ambiguous to read when the data values are very far apart. Take a look at the chart shown below:
At first glance, you will three different colors showing on the chart. While a closer analysis will establish that there are only two categories being showcased, this could be slightly misleading initially.
More examples of the area chart
While looking for some interesting examples that showcased the many varied ways in which an area chart can be used, we came across one that we thought we should share with you.
Google uses an area chart to show the musical timeline from 1950 to 2010. You can take a look at this chart here.
This was a quick guide on the dos and don’ts of using area charts. You can see more sample implementations of the area chart in our chart gallery.
