---
title: "Layered chart"
description: "Overlaid marks on a shared x axis. What the layered chart is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-layer"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Overlaid marks on a shared x axis. It sits in the **Advanced** group of the widget library.

![Example layered chart on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/layer.db0116e07126073f.png)

## When to use it

Use a layered chart to put different measures on one time axis, each drawn its own way. For example, monthly spending as bars with the budget as a line. Layers can come from different sources, joined on the shared x field.

## When to pick something else

- One measure over time? Use a **Line chart** or **Column chart**.
- Several series of the same measure? Use a **Grouped bar** or a **Line chart** with a series field.
- Parts adding up to a total over time? Use a **Stacked area** or **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 date or a category or a number |                       |
| **Y (per layer)** | Yes    | a number                         | You can pick several. |

Each row is drawn as it is, so shape the rows first if you need totals. See [Shaping data](/docs/dashboards/dashboards-shaping-data).

## Layered chart options

Set these on the **Style** tab of the inspector. "Automatic" means BankSync picks a value from the chart's size and data.

### Needs history

Show a note instead of the chart until the rows cover enough periods, so a first week never reads as a trend.

| Option              | What it does                                                                       | Values                          | New charts start with |
| ------------------- | ---------------------------------------------------------------------------------- | ------------------------------- | --------------------- |
| **Date field**      | The date column whose distinct periods are counted.                                | Text                            | Automatic             |
| **Period**          | What counts as one period: a day, week, month, quarter or year.                    | Day, Week, Month, Quarter, Year | Automatic             |
| **Periods needed**  | How many distinct periods the rows must cover before the chart draws (2 to 60).    | Whole number, 2 to 60           | Automatic             |
| **Waiting message** | Shown until there is enough history. Leave empty for a message naming the periods. | Text, up to 120 characters      | Automatic             |

## 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

- Values are added together per x value. Layers are not bucketed for you, so group dates by month or week in each source first.
- A blank value leaves a gap in a line or area rather than dropping to zero.
- A layer split by a series field draws at most eight marks. The rest are combined into "Other".
- Bars always draw beneath lines, so a line is never hidden.
- Measures of very different sizes flatten each other. Put the smaller one on the second (right) axis.

## On a phone

On a phone the legend gets one or two rows, and entries that do not fit are cut off as "+N more". Two or three layers read well on a phone.