KPI, Table & Gauge Widgets

Configure the three non-chart widget types: a KPI big-number with comparison, target and sparkline, a richly-formatted table with per-column control, and a gauge with a needle and color bands.

5 min read

On this page

KPI: one number that matters
Worked example: spend this month, vs last month
Table: rows with per-column control
Pagination
Gauge: a value on a scale
Worked example: savings rate against a 70% target
Related guides

Not every widget is a chart. Three widget types show numbers without an x/y plot: the KPI for a single headline figure, the Table for rows of detail, and the Gauge for a value against a scale. Each has its own set of controls.

Where these controls live

Each of these widgets is configured in its inspector, the panel that opens on the right when you select a widget on the canvas. To get one onto the canvas in the first place, see Adding widgets (linked at the foot of this page). To switch a widget you already have to KPI, Table or Gauge, select it and change its kind in the inspector.

A settled KPI widget cell on the dashboard grid: a draggable header titled Income above a large rendered figure of $12,480, with no loading spinner or truncation. — A KPI widget on the canvas. Select it to open its inspector.

KPI: one number that matters#

A KPI shows a single big number (this month's spend, total balance, transaction count) with optional context around it.

Value and summary

Pick the field (BankSync limits the picker to measures, the numeric fields it can total), then choose how to summarize the result: Sum, Average, Median, Min, Max, Count of rows, or the latest/earliest row.

Comparison

Show the change against a prior period as an up/down delta, so the number has direction. Compare against the previous period, the previous year, a fixed baseline, or a rolling window.

Sparkline

Add a tiny inline trend line beneath the number for at-a-glance history.

The KPI inspector also lets you choose a Display as style so the same number can read as a plain card, a change-focused delta, a progress bar toward a target, a bullet (target plus bands), or a gauge. Add a prefix/suffix (for example a $ or %), a label and a caption (such as "vs last month"), and pick whether the number formats as a plain number, currency, percent, or a compact value with set decimals.

Set a target for budget-vs-actual

Turn on Target in the KPI inspector to set a goal value and add colored bands around it. Paired with the Progress or Bullet display style, this turns a KPI into a budget-vs-actual or goal tracker: the number shows where you are, and the bands show whether you are on track. This is the fastest way to answer "how am I doing against plan?" without building a separate chart.

The KPI widget inspector fully decorated: a sum of the Amount field, the comparison option enabled to show an up/down delta-arrow against a prior period, and the sparkline toggle turned on to add an inline area trend line beneath the number. — KPI inspector with the sum value, comparison delta and sparkline enabled. Target and Display-as controls live in the same panel.

Worked example: spend this month, vs last month#

Add a KPI widget and select it to open the inspector.
Under Value, pick your amount field and set Summarize to Sum.
Turn on Comparison and set Compare against to Previous period, so the delta reads "vs last month".
Optionally turn on Sparkline for a small trend line, and add the caption "vs last month".

You now have a single headline number with direction, no chart required.

Table: rows with per-column control#

A Table widget lists rows from your data with control over each column.

Shape a table

Choose and order columns
Show the fields you want and drag to reorder them; remove the ones you do not need.
Set how each column reads
Open a column and pick its Format. The choices are Text, Number, Currency (with a currency picker), Percent, Date, Relative date, Yes/No, Duration, and JSON. BankSync picks a sensible default from the data, and you can override it per column.
Align, pin and size
Per column you can set the alignment (left/right/center), pin it to the left or right edge so it stays in view as you scroll sideways, set a fixed width, and toggle whether the column is sortable.
Rename and pick an icon
Give the widget a clear title and icon so it is easy to find.

Beyond the per-column format, the Appearance section sets the look of the whole table: row density (comfortable/compact/tight), borders, zebra stripes, row numbers, a sticky header, a sticky first column, and whether long text wraps.

The table widget inspector's column manager: a Date column card and an Amount column card, each with a reorder grip and per-column format, alignment and pin controls, plus two more fields available to add to the table. — Table inspector column manager: reorder, format, align and pin each column

Rich cell formats render automatically

Tables can show far more than plain text and numbers. Depending on the data, a cell can render as a status pill, a progress bar, an inline sparkline, heatmap-shaded shading, a star rating, tag chips, a link, an image, formatted Markdown, a range bar, a difference indicator, an icon, or a duration. These richer formats are assigned automatically from the shape of your data; the per-column Format dropdown covers the everyday choices (currency, percent, date, duration, and so on).

A rendered table showing several rich cell formats at once: a currency column with signed amounts that tint by sign (Woolworths minus $412.18, salary plus $6,540.00), a status column with Posted, Pending and Cleared pills, a budget-used percentage column, and a 4-week trend sparkline column, with a 142 rows meta line beneath. — A table renders status pills, sign-tinted currency, percent and an inline trend, all chosen automatically from the data.

How coloring works

Several formats color themselves from the data: currency and percent cells tint by sign (so negatives stand out), and status cells take a tone from their value. You do not author per-cell rules in the inspector; pick the format that matches the column and the coloring follows the data as it updates.

Pagination#

Long results stay readable because the table paginates. The Pagination section lets you choose the mode: Paged (the usual default, with page controls), Virtual (smooth scroll through a long list), or None. When pagination is on, set the rows per page (default 25). Pagination is a setting you can change, not something fixed.

Gauge: a value on a scale#

A Gauge draws a needle on a banded arc, good for a value measured against a target or a healthy range.

Value

Type or pick the result value the needle points to. This is a free-text box with suggestions, not a field dropdown, and the gauge sums the rows for you (there is no separate aggregate choice).

Scale

Set the min and max, the arc shape (half, three-quarter, full), and thickness.

Bands

Add colored bands (for example green, amber, red) so the reading has meaning at a glance.

Gauge bands

A gauge with no bands draws its arc in one accent color. Add bands to turn it into a status dial, where each range gets its own color and the needle's band tells the story.

Worked example: savings rate against a 70% target#

Add a Gauge widget and select it to open the inspector.
Under Value, type the alias of your savings-rate result (the suggestions list helps); the gauge sums the rows to a single figure.
Set the Scale min to 0 and max to 100, with a percent unit.
Add three Bands: red up to 50, amber up to 70, green beyond 70.

The needle now lands in the band that matches your savings rate, so the reading is a status, not just a number.