---
title: "Stacked area"
description: "Series stacked over time. What the stacked area is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-stacked-area"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Series stacked over time. It sits in the **Time series** group of the widget library.

![Example stacked area on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/stacked-area.0c11b081ae361ea1.png)

## When to use it

Use a stacked area to show how parts build a total over time: cash split across accounts, spending by category each month, or portfolio value by asset class. The top edge is the total.

## When to pick something else

- Only one series? It draws as a plain **Area chart** anyway.
- Need to compare each part's own trend precisely? Use a **Line chart**; only the bottom band has a flat baseline.
- Care about each part's share rather than the amounts? Use a **100% stacked bar**.
- Few periods and exact totals matter? Use a **Stacked bar**.

## The data it needs

Pick these in the **Data** tab of the inspector. BankSync suggests a column for each when your source has an obvious match.

| Field      | Needed   | Pick                 | Notes |
| ---------- | -------- | -------------------- | ----- |
| **X axis** | Yes      | a category or a date |       |
| **Y axis** | Yes      | a number             |       |
| **Series** | Optional | a category           |       |
| **Color**  | Optional | a category           |       |

Rows that share a category are combined before drawing: choose **Sum**, **Average**, **Count**, **Min** or **Max** on the value field. See [Binding data](/docs/widgets/binding-data).

## Stacked area options

This chart has no options of its own; everything on its **Style** tab is the shared chart styling below.

## Shared chart styling

Every chart also has the shared styling options. These apply to this one:

- [Legend](/docs/widgets/chart-styling#legend): position, layout and which series show.
- [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format.
- [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background).
- [Value labels](/docs/widgets/chart-styling#value-labels) on the marks.
- [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout.
- [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation.
- [Tooltip](/docs/widgets/chart-styling#tooltip) on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering).
- [Colours](/docs/widgets/chart-styling#palette): follow the dashboard palette or pick one for this chart.

## Messy data

- A missing value counts as zero inside the stack, so a band pinches to nothing for that date rather than breaking.
- Negative values stack below zero, separately from positive ones.
- More than 8 series: the 7 largest keep their colour and the rest merge into **Other**.
- Values on the same date are summed by default; for balances, set the value's aggregate to **Last**.
- The tooltip lists every band plus a **Total**.

## On a phone

Stacked areas hold up at full phone width because the total shape is still readable. The legend moves below the chart on narrow widths; with many bands it is cut to a row with "+N more", so limit phone versions to about four series.

## Related charts

- [Line chart](/docs/widgets/chart-line): Time series over any field
- [Area chart](/docs/widgets/chart-area): Stacked or overlaid area
- [Sparkline](/docs/widgets/chart-sparkline): Tiny inline trend
- [Stream graph](/docs/widgets/chart-stream): Centered stacked area
- [Step line](/docs/widgets/chart-step-line): Discrete jumps over time