The Chart Kind Catalog

Browse every chart kind BankSync can render, grouped by what they are good at, with a quick start for the everyday kinds and how switching kinds reuses your data binding.

8 min read

On this page

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.

Browse chart kinds in the widget library and add one to the dashboard canvas.

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

Time series#

Show how a value changes over time. These expect a date on one axis.

KindUse it for
LineA value over time (balance, spend per day).
AreaA line with the area filled, to emphasize volume.
Stacked areaSeveral series stacked to show the total and the mix.
StreamA flowing, center-aligned stacked area for shifting mixes.
Step lineValues that hold then jump (like a balance after each transaction).
SparklineA tiny inline trend with no axes, great inside a KPI.

Comparison#

Compare a value across categories.

KindUse it for
Bar / ColumnCompare a measure across categories (spend by merchant).
Grouped barCompare several measures side by side per category.
Stacked barShow each category's total and its parts.
100% stacked barCompare the mix across categories, ignoring totals.
Lollipop / DotA lighter bar alternative for ranked values.
BulletA value against a target or threshold.

Part of a whole#

Show how parts add up to a total. These need a category to slice by. Pie / Donut is the everyday one; the rest are stylistic variations.

KindUse it for
Pie / DonutA few categories' share of a total.
Nightingale / Radial barA circular take on category comparison (a "rose" chart, bars drawn around a center).
Treemap / SunburstNested shares (category then subcategory).
Mosaic / WaffleProportions as tiled blocks.
Funnel / PyramidStages that narrow from top to bottom.

Distribution#

Show how values are spread out. Histogram is the everyday one; the rest are specialized statistical views.

KindUse it for
HistogramHow often values fall in each range (transaction sizes).
Density / RidgelineA smoothed version of a histogram, one curve or several stacked.
Box plot / ViolinThe spread and outliers per category (the middle, the range, the stragglers).
Strip / Beeswarm / JitterEvery individual value as a dot, spread out so they don't overlap.

Correlation#

Show how two measures relate. Scatter is the everyday one; the rest handle very dense data or many measures at once.

KindUse it for
ScatterTwo measures plotted against each other.
BubbleA scatter with a third measure shown as the dot size.
Hexbin / ContourA scatter so dense that it is summarized by how crowded each area is.
Parallel coordinatesCompare many measures across items on side-by-side scales.

Flow and network#

Show movement or relationships between things. These are specialized; reach for them when a bar or table can't show how amounts move between groups.

KindUse it for
Sankey / AlluvialFlows between stages, drawn as ribbons (income into categories).
Chord / ArcRelationships between entities, drawn around or along an edge.
NetworkA graph of connected nodes.

Matrix and heatmap#

Show intensity across two dimensions as color. Heatmap and Calendar heatmap are the approachable ones.

KindUse it for
Heatmap / Heatmap matrixA value across two categories, shown as color intensity in a grid.
Correlation matrixHow every measure correlates with every other (a specialized grid).
Calendar heatmap / PunchcardActivity by day, or by day and hour, like a contribution calendar.

Radial, financial, and single value#

KindUse it for
Radar / Polar / Circular barCompare measures around a circle.
Candlestick / OHLC / Volume profilePrice movement for investment data.
Gauge / Meter / ProgressA single value against a scale or target.

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

Preview kinds

The everyday chart kinds (line, area, bar, column, pie, donut, scatter, histogram) are fully styleable: legend, axes, grid, and title all respond. The newer and more specialized kinds render correctly but do not yet expose every styling control, so they carry a Preview badge to flag that their appearance options are still limited. The styleable set grows over time as more kinds are finished, so trust the Preview badge in the app rather than memorizing a list.

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.
A table's column manager: reorder columns, set per-column format and alignment, and pin or add fields.

Bind your data

Use this page with your AI assistant

Every BankSync doc is available as plain Markdown for agents and LLMs.