Adding Widgets

Add charts, KPIs, and tables to a dashboard: browse the full widget catalog, reuse a widget you already built, or ask an AI agent.

5 min read

On this page

Widgets are the building blocks of a dashboard: each one is a chart, a KPI, a table, or another visual tied to your data. You add widgets from the library, which you open with the ] key or the Widgets button in the editor toolbar. The library has three tabs, each a different way to get to the widget you want.

The add-a-widget library panel open on the All tab: a searchable catalog of widget kinds, each card showing a live mini-preview of the chart, KPI, or table.
The widget library: a searchable catalog of every widget kind, each with a live preview.
Adding a widget from the library and arranging the canvas.

The three ways to add a widget#

All

The full catalog of widget kinds — every chart type plus KPI, table, text, image, embed, filter, and action. Search it, preview each card live, and click or drag to add a fresh widget.

Dashboard

The widgets already on this dashboard, in one place. Edit one (opens the inspector) or remove it from the dashboard.

Workspace

Every widget you have already built. Reuse one across dashboards without rebuilding it.

A quick gloss of the terms that come up below: a widget is pinned to a dashboard (it appears there, but the underlying widget is shared, not copied); the inspector is the settings panel that opens when you select a widget; and to detach a widget is to remove it from one dashboard without deleting it.

Another way: ask an AI agent (staging)

If you drive BankSync through an AI agent (for example Claude using the BankSync tools), the agent can create dashboards, widgets, queries, and folders for you. These authoring tools are available in staging while Dashboards is in beta and are not yet on in production.

Browsing the catalog#

The All tab is where most widgets start. It lists every widget kind — charts (line, area, bar, column, donut, and the rest), KPIs, tables, text notes, images, embeds, filter controls, and action buttons — with a search box at the top and a live mini-preview on each data-bound card. Type to narrow the list (for example "donut" or "table"), then add the one you want.

Add a widget from the catalog

  1. Open the library

    Press the bracket key, or click Widgets in the toolbar.
  2. Find a kind

    Stay on the All tab and scroll, or type a word like "kpi" or "bar" to filter.

  3. Preview it

    Each data-bound card shows a live mini-preview rendered against sample rows.

  4. Add it

    Click the card to drop it at the next open spot, or drag it onto the canvas to place it precisely.

Worked example: spending by category

Open the library with ], type "bar" in the All tab, and add a bar chart. Then select it to open the inspector, point it at a feed, group by category, and sum the amount. Drag a corner to make it wider. To change anything later (the grouping, the chart kind, the colors), adjust it in the inspector. See Binding data for the field-by-field details.

Whatever kind you start from, you can switch it in the inspector after placing it. This includes the less common kinds (treemap, radar, boxplot, sankey, sunburst, calendar heatmap, and similar): each one gives you a working field editor for picking the columns it needs, so you are not limited to the everyday charts.

The chart-kind picker showing the full catalog (line, area, bar, donut, pie, treemap, boxplot, heatmap, gauge, KPI, table and more) grouped by family, with a search box.
Starting a brand-new dashboard, the chart-kind picker offers the same catalog grouped by family.

Gauge, meter, and progress are chart kinds (the "single value" family), so you find them in the catalog alongside line, bar, and the rest.

Placing a widget: click or drag#

This works the same way no matter which tab you added from. Clicking a library entry adds the widget at the next open spot on the grid. To place it precisely, drag it from the library onto the canvas: a ghost outline shows where it will land before you drop it. Once placed, drag the widget to move it and drag an edge to resize. The layout saves automatically.

On a brand-new, empty dashboard you do not even need to open the library first: the canvas shows an Add a widget prompt that opens the same chooser.

An empty dashboard canvas with a 'Nothing here yet' card and an 'Add a widget' button, the on-canvas prompt that opens the widget chooser on a brand-new dashboard.
On a new dashboard, the empty canvas itself prompts you to add your first widget.
A single widget placed and fully rendered in its cell on the dashboard grid, sitting in an open spot alongside the surrounding layout.
A widget settled into place on the grid after being dropped.

Reusing a widget you already built#

The Workspace tab lists every widget in your workspace. Adding one from here pins it onto the current dashboard rather than making a copy: it is the same widget, shown in more than one place. Edit it once and the change shows everywhere it is pinned. Each entry shows how many dashboards use it (for example "Used on 3 dashboards") and marks the ones already pinned to the current dashboard, so you can see at a glance whether changing it will ripple to other dashboards.

Pinning is not copying

Adding from Workspace pins the existing widget; editing it updates every dashboard that pins it. If you want an independent variant, duplicate the dashboard (which keeps its own pins) or build a fresh widget from the All tab instead.

More than charts#

Not every widget is a chart. The All tab lists every kind, charts and non-charts alike — search or scroll to find these:

KPI

A single big number with an optional comparison and sparkline.

Table

A formatted, paginated table of rows. Each column can be styled per its meaning: currency, percent, status pills, progress bars, mini sparklines, ratings, chips, links, and more.

Text

A Markdown note for headings, context, or instructions.

Image & Embed

A static image or an embedded external page.

Filter & Action

A filter control, or a button that runs a workspace action.

Custom widget (beta)

For developers: author your own widget in TypeScript against the BankSync widget SDK.

Tables are richly formatted

A table is not just plain text. Pick a format per column so each value reads the way a finance reader expects: amounts as currency, rates as percentages, states as colored status pills, completion as a progress bar, a trend as a tiny inline sparkline, plus dates, durations, ratings, chips, links, and images. Set this up in the table's column manager in the inspector. See KPI, table & gauge widgets for the full list.

Removing a widget from a dashboard#

There are two ways to take a widget off a dashboard, and both ask you to confirm:

  • From the Dashboard tab of the library, find the widget and click its trash icon.
  • Or select the widget on the canvas (its settings open in the inspector) and click ✕ Remove from dashboard at the bottom of the inspector.

Either way this detaches it from this dashboard only: the widget stays in your library, so any other dashboard that pins it is unaffected and you can re-add it later.

The widget inspector right rail with the Data/Style/Share/Advanced tabs and finance fields, ending in a pinned destructive footer button reading 'Remove from dashboard'.
The Remove from dashboard button lives at the bottom of the inspector, below the tabs.

Bind a widget to your data

Use this page with your AI assistant

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