# Grouped Area Chart

A grouped area chart stacks multiple filled areas on top of each other - one per category in a breakdown dimension. Each layer shows the contribution of that category, while the overall height of the stack represents the combined total.

Grouped area charts excel at comparing trends across multiple categories while showing their cumulative contribution over time.

###### Site Earnings

Chart with 4 data series.

Earnings across four sites during the first week of January 2024.

The chart has 1 X axis displaying Date.
The chart has 1 Y axis displaying Earnings (sum). Data ranges from 482.63 to 42454.73.

Created with Highcharts 12.4.0 Date Earnings (sum) Site Earnings Earnings across four sites during the first week of January 2024​ Designer Donuts Indie Soda Holiday Food Crafts Cheese Board Plus Jan 1 Jan 2 Jan 3 Jan 4 Jan 5 Jan 6 Jan 7 $0 $10K $20K $30K $40K $50K $28k Total Lowest $42k Total Highest

## Creating an Effective Grouped Area Chart

Recommended data types for each axis:

- **X-Axis** Dates or ordered categories
- **Y-Axis** Numerical values
- **Breakdown Axis** Categorical data (each unique value becomes a stacked layer)

## Description

- **Stacked areas** - each category is drawn as a filled layer; the layers are stacked so each one starts where the layer below ends
- **X-Axis** - typically represents time or a sequential variable
- **Y-Axis** - represents the cumulative value of all stacked layers
- **Colors** - each category uses a distinct fill color; lighter or semi-transparent fills help when layers overlap
- **Legend** - maps each color to its corresponding category

## When to Use a Grouped Area Chart

- **Compare trends across categories** - see whether one group is growing faster or declining relative to others
- **Show cumulative totals** - the total height of the stack at any point represents the sum of all categories
- **Understand each category’s contribution** - the thickness of each layer at a given X value shows that category’s share
- **Highlight changes in composition over time** - shifting layer proportions reveal how the mix of categories evolves

## When to Avoid a Grouped Area Chart

- **Many categories** - more than 4–5 layers makes colors hard to distinguish and layers hard to measure; consider a [grouped line chart](https://instacharts.io/docs/chart-types/grouped-line-chart/) or filter to fewer categories
- **Comparing non-bottom layers precisely** - only the bottom layer shares a zero baseline; comparing mid-stack layers is difficult; use a [grouped bar chart](https://instacharts.io/docs/chart-types/grouped-bar-chart/) for precise comparisons
- **Negative values** - stacked areas do not handle negative values well

## Variants

### Normalized Grouped Area Chart

A normalized (100%) grouped area chart rescales the stack so the total always reaches 100%. Each layer shows its percentage contribution rather than absolute value. Use this when you want to compare the relative composition of categories over time without the total size affecting the visual.