---
title: "The Chart Kind Catalog"
description: "Browse every chart kind BankSync can render, grouped by what they are good at, with a quick start for the everyday kinds, how switching kinds reuses your data binding, and where each chart is styled."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-kinds"
specs: ["dashboards"]
---

Every data-bound widget renders as one **chart kind**. BankSync supports a large catalog of kinds. You pick a kind when you add a widget and can switch it any time later. Switching reuses the fields you already bound, so trying line, then area, then column is usually a one-click experiment, not a rebuild.

[![Add a KPI widget and choose its data](https://cdn.banksync.io/videos/add-a-widget.poster.2211514e07cb22f2.png)](https://cdn.banksync.io/videos/add-a-widget.c3bd9b5508bd6ecb.mp4)

[Watch: Add a KPI widget and choose its data](https://cdn.banksync.io/videos/add-a-widget.c3bd9b5508bd6ecb.mp4)

> **Not sure which one to pick?:** Most finance and ops dashboards only need a handful of kinds. Start with one of these and switch later if it doesn't fit:Line for a value over time (balance, daily spend).Bar / Column to compare a value across categories (spend by merchant).Pie / Donut for a few categories' share of a total.KPI for a single headline number (this month's spend).Table for the underlying rows.The rest of this page is a reference catalog. The everyday kinds above are listed first in each group, and the more specialized kinds (Stream, Beeswarm, Sankey, Chord, and so on) follow for when you need them.

## Two places you pick a kind

There are two pickers, and they group the kinds slightly differently. Both reach the same catalog.

- **The first-pick picker** appears on an empty canvas under the heading **What do you want to see?** It groups kinds by visual family: Trend, Composition, Hierarchy, Distribution, Matrix, Single value, Relational, and Financial. You pick the look first, then the inspector prompts you for the fields.
- **The Chart type picker** lives in the **inspector** (the panel that opens when you select a widget). It groups kinds by the question they answer: Time series, Comparison, Part-of-whole, Distribution, Correlation, Flow / network, Matrix / heatmap, Radial, Financial, and Single value. Use it to switch an existing widget's kind without losing your bound fields.

The tables below follow the inspector's "question" grouping, since that is where you spend most of your time once a widget exists.

![The empty-canvas chart picker titled 'What do you want to see?', showing chart kinds grouped by visual family (Trend, Composition, Hierarchy, Distribution, Matrix, Single value) as labeled cards with emoji badges and a search box at the top.](https://cdn.banksync.io/screenshots/dashboards/chart-kind-picker.d737c901e47cb93d.png "The first-pick picker on an empty canvas, grouped by visual family with a search box. The inspector's Chart type picker groups the same kinds by question instead.")

In the inspector, the Chart type dropdown lists the same kinds under question-based headings (Time series, Comparison, Part-of-whole, and so on), so you can switch an existing widget's kind from there without leaving its field bindings.

## A worked example

Say you want to see **spend per category** from your Transactions feed:

1. Add a widget and point it at your **Transactions** feed.
2. In the **What do you want to see?** picker, choose **Bar** (under Trend) or open the inspector's **Chart type** picker and choose **Bar / Column** (under Comparison).
3. In the inspector, set **Group by** to **Category** and **Value** to the sum of **Amount**.
4. To see the same numbers as a ranked list instead, switch the kind to **Lollipop / Dot**: your Category and Amount stay bound, so it is a one-click change.

That is the whole loop: pick a kind, bind a category and a number, switch kinds freely.

## Every chart kind

The [Chart reference](/docs/widgets/chart-reference) lists every kind, grouped the way the widget library groups them, with an example of each that you can open as a live chart. Each kind's page says what it is for and when to pick something else, the fields it needs, every option it has and what a new chart starts with, how it copes with messy data, and how it reads on a phone. Those pages are generated from the chart engine itself, so they always match what you can build.

A few pointers while you choose:

- **Time series** kinds (line, area, stacked area, stream, step line, sparkline) expect a date on one axis.
- **Comparison** kinds (bar, column, grouped and stacked bars, lollipop, dot, bullet) compare a number across categories.
- **Part of a whole** kinds (pie, donut, treemap, sunburst, waffle, funnel, pyramid) show shares of a total.
- **Distribution**, **correlation**, **flow**, **matrix**, **radial** and **financial** kinds cover spreads, relationships, movements between categories, two-way grids and price data.
- **Waterfall** (Financial, beta) walks from a starting amount to an ending one step by step: a P\&L from revenue to net profit, or a month's net-worth change.

The single-value kinds (Gauge, Meter, Progress) show one number against a scale or target rather than a series of points. A gauge is the most legible of the three for a goal like a savings rate.

![The gauge inspector for a savings-rate goal: a three-quarter gauge shape with a percentage unit and green, amber, and red color bands marking the target ranges.](https://cdn.banksync.io/screenshots/dashboards/gauge-inspector.17ee836f6833bbb1.png "A gauge configured for a savings-rate goal, with color bands for on-track, warning, and off-track.")

## Switching kinds without losing work

When you change a widget's kind in the inspector's **Chart type** picker, BankSync re-uses the fields you already bound (and their settings, like the grouping grain or the sum) and fills in only what the new kind adds. So line, area, and column swap freely.

One thing to know: if you switch to a kind that holds fewer fields, the extras are dropped rather than kept. For example, a multi-series line carries a date, a number, and a series split. Switch it to a pie (which has room only for a category and a value) and the series split has nowhere to go, so it falls away. Switch back and you re-bind it. Within kinds of the same shape (line, area, column, bar) nothing is lost.

If a kind cannot render your current data, the picker disables it and tells you why in plain language, for example "needs a category field" or "needs a number field" rather than naming internal field roles. Bind the missing kind of field and the option lights up.

![A widget cell showing a fix-it nudge because the same field is bound to both axes, with an inspector hint explaining how to correct the encoding.](https://cdn.banksync.io/screenshots/dashboards/widget-fix-it.7e6f1fa530743ca7.png "When a kind cannot render the current binding, the widget shows a plain-language fix-it nudge instead of a broken chart.")

> **Financial kinds want price columns:** 'Candlestick, OHLC, and Volume profile expect Open, High, Low, and Close columns and recognize them by name. On plain transaction data they stay disabled with the message "needs Open/High/Low/Close fields". They are built for investment or market data, not spending.'

> **Less common kinds are editable too:** The everyday chart kinds have purpose-built field controls, and the more specialized kinds (radar, treemap, box plot, heatmap matrix, calendar heatmap, sankey, gauge, and the like) now have a working field editor as well. Selecting one of these opens a panel that lists each field slot the kind uses, so you can bind and rebind them the same way.

## Make a chart your own

Every chart kind is styleable. Select a chart and open its **Style** tab:

- **Palette** at the top: the dashboard's palette, another named palette, or **Custom (hex list)**.
- **Card**: show the description as a subtitle, show the icon, an **Accent colour**, **Surface**, **Padding**, **Title alignment**, and a **Drawing style** that can differ from the dashboard's.
- **\[Kind] options**: the settings only this kind has, such as line steps, bar stacking, or histogram bins.
- **Categories and labels**: **Show top** (fold small categories into "Other"), **Order** (As queried, By value, A to Z), **Tidy labels**, and the **Handwritten callout**.
- Legend, axes, grid, and value labels, where the kind has them.

The inspector only shows a control when changing it changes that kind of chart. Line, bar, area, and scatter charts also have a **Series** list on the Data tab for plotting several measures. Every chart's page in the [Chart reference](/docs/widgets/chart-reference) lists its options, and [Chart styling](/docs/widgets/chart-styling) covers the options every chart shares.

## Goals, rules, tooltips and history

These options work across chart kinds and are set in the widget's spec (the Advanced tab, or a template).

**Reference lines and bands.** `annotations` draws guides on line, area, bar, scatter, layer and waterfall charts:

- `reference-line`: a goal or threshold. The `value` is a number, a dashboard filter (`{ "$filter": "goal" }`), or a value read from the rows (`{ "field": "budget", "aggregate": "max" }`). A goal above every bar stretches the axis so it stays visible.
- `reference-range`: a shaded band between `from` and `to`, such as a normal range.
- `reference-statistic`: a line at the `mean`, `median`, `min`, `max` or a percentile of a field.

```json
{
  "annotations": [
    {
      "kind": "reference-line",
      "axis": "y",
      "value": { "field": "budget", "aggregate": "max" },
      "label": "Budget",
      "color": "bad"
    },
    {
      "kind": "reference-statistic",
      "axis": "y",
      "stat": "mean",
      "field": "amount",
      "label": "Average"
    }
  ]
}
```

Each line's label and value are read out to screen readers. `text`, `trendline` and `event-markers` annotations are not drawn yet.

**Conditional colours.** `conditionalFormat` colours a bar, point, slice or tile by rule: the first rule whose `when` matches the drawn row (after grouping) sets its colour. Give each rule a `label` such as "Over budget": it appears in the tooltip and screen-reader text, so colour is never the only signal.

```json
{
  "conditionalFormat": {
    "field": "amount",
    "rules": [
      {
        "when": {
          "field": "amount",
          "op": "gt",
          "value": { "$field": "budget" }
        },
        "label": "Over budget",
        "style": { "color": "bad" }
      }
    ]
  }
}
```

**Category colours.** `colorMap` fixes a colour per category on any chart kind; see [Theming](/docs/dashboards/dashboards-theming) for the dashboard-wide map and the colour forms (`slot:N`, tokens, light and dark pairs).

**Tooltips.** `tooltip.fields` replaces the default tooltip rows with your own list, each with an optional `label` and `format`. `tooltip.template` replaces them with one line of text where `{{field}}` reads the hovered row, for example `"{{merchant}} charged {{amount}}"`. Values are shown as text, never as markup.

**Not enough history yet.** `minHistory` holds a chart back until its rows cover enough periods, so a first week never reads as a trend:

```json
{ "minHistory": { "field": "date", "unit": "month", "minPeriods": 2 } }
```

Until then the chart keeps its box and shows a note naming the periods it needs, or your own `message`.

Charts fit themselves to the widget: on a small widget, extras such as the callout and legend give way first so the marks keep their room. If a widget is too small to draw anything useful, it says **Make this widget bigger**.

> **The catalog tracks the renderer:** The list of available kinds reflects what the chart engine can actually draw, so you only ever see kinds that will render. New kinds appear here as the renderer gains them.

## Beyond charts

KPI, Table, and the single-value kinds are covered in depth on their own page. Tables in particular do more than show plain rows: each column can be formatted as currency, a status pill, a progress bar, an inline sparkline, a rating, and more, all configured in the table's column manager.

![The table column manager showing a Date column card and an Amount column card, each with reorder grips and format, alignment, and pin controls, plus two more fields available to add.](https://cdn.banksync.io/screenshots/dashboards/table-inspector.af7121ceeceb4fdc.png "A table's column manager: reorder columns, set per-column format and alignment, and pin or add fields.")

## Related guides

- [Binding data](/docs/widgets/binding-data): choose the fields a chart kind needs.
- [Adding widgets](/docs/widgets/adding-widgets): start a widget of any kind.
- [KPI, table & gauge widgets](/docs/widgets/kpi-table-gauge): the non-chart kinds in depth.
- [Chart reference](/docs/widgets/chart-reference): every chart kind with a live example, its fields and every option.
- [Chart styling](/docs/widgets/chart-styling): legend, axes, grid, labels and colours, shared by every chart.
- [Theming](/docs/dashboards/dashboards-theming): drawing style, palette, and callouts for the whole dashboard.

[Bind your data](/docs/widgets/binding-data)