The area chart is quite similar to the line chart. It can be used to track changes over time for one or more categories. You can also compare data from multiple categories by having multiple areas. Let’s dive into more detail!

Area charts are used to visualize numbers over a certain period of time. You can use the area chart to show trends over time among related categories. The area chart is similar to the line chart except that the area below the line is filled in with color to indicate volume.

When multiple categories are included, the first category is visualized as a line with color fill followed by the second category, and so on.

How to create an area chart

The area chart can be found underneath the ‘Area charts’ section. You can add it to the editor by clicking on it or by drag and drop. There are three data slots to add data to - ‘X axis‘, ‘Measure’ and ‘Group by’.

X axis

Columns with data types ‘date time’ are a perfect fit for this slot.

The column added to it defines the displayed time frame or period for which the chart shows data.

In the example below, the month level of a date column is used. Of course, other levels are also possible depending on your data - years, quarters, weeks, days, hours or even seconds.

Measure

Columns with data type ‘numeric’ are a perfect fit for this slot.

The measure slot defines the numeric value for a specific point in time. The higher the value, the higher the data point in the grid. Different aggregations can be set in order to be able to display different calculations over time, e.g. the average.

In the example, the numeric column ‘volume’ is used to indicate the amount that are sold per month.

Group by

Columns with data type ‘hierarchy’ are a perfect fit for this slot.

When adding data to it, multiple areas will appear to enable you to compare different volumes from different categories. This is really powerful and gives you enhanced insights in your data, trends and evolutions over time.

Make sure not to have too many categories on the chart. As it might look messy and difficult to analyze.

The example shows the evolution over time of the volume sold per product. By adding a filter, you can choose which products you would like to compare.

Tips and tricks

In the setting of the chart you can easily switch between different modes - Unstacked, Stacked, 100% Stacked or Stream. And by enabling ‘Mode option’ you allow your end-users to switch between different modes (the selection will appear in the top left corner of the chart).

In case you want a softer look, you can go for the ‘monotone’ mode as line interpolation and place your legend at the bottom.

You can fully style your chart by selecting themes to your liking from our library or even create your own custom look.

Remove or adapt the density and styling of ticks on the axis, replace them with gridlines. Or change the format from Auto to User defined. As such, the label will reflect the exact format of the date level you've chosen (date, month, quarter, etc.).

This chart can be filtered via the Brush filter by default. You can use this filter by clicking and dragging on an area of the chart. The "Clear filter" button will return the dashboard to the initial, unfiltered state. You can also disable the "Brush filter" in the "Interactivity" section of the chart settings.

The legend in this chart can be used to show or hide specific elements by clicking them.

Video Tutorial

Similar charts

A chart similar to the area chart is the line chart.

Need more information?

Do you still have questions? Let us know how we can help.
Send us feedback!