Skip to content
InsightCharts

Search

Search guides and components

Linked charts

Two to four charts over one shared dataset in a responsive grid: clicking a mark in one filters the others, with the active filters shown as removable chips.

Use when
Exploration of one table along several dimensions: by region, by category and over time. Pass row-level data once; each chart aggregates it with its own transform, sets select: true and omits data.
Avoid when
A report that states one fixed fact (use chart with callout or scrolly chart); charts over unrelated datasets (they cannot filter each other); more than four charts.

Preview

Asia generated 46% of the renewable electricity in these four regions from 2020 to 2024

Electricity generation from hydro, wind and solar, TWh, four regions, 2020 to 2024

Click a bar to filter the other charts60 rows

By region

By source

By year

Source: Ember, Global Electricity Review 2025 · Regional figures rounded, illustrative

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Built from

The pieces linked charts renders or expects in its slots.

Molecules

1

Filter chips

The active crossfilter selections of the surrounding InsightData, shown as removable chips with a reset control.

Atoms

2

Bar chart

Compares a value across categories with bars from a zero baseline.

Line chart

Shows how one or more values change over time or another ordered dimension.

Used in

1 template uses linked charts.

Templates

1

Data explorer

A set of linked charts over one shared dataset that filter each other. It has a headline, a sentence of instructions with filter chips, a row of figures that recompute from the filtered rows, two to four charts and an optional detail table. It opens on selections the author chooses.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/linked-charts

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { LinkedCharts } from "insightcharts";

Examples

Two charts, no row count

Click a mark to filter the other charts

Generation by region

Generation by source over time

Props

PropTypeDefaultDescription
datarequiredDataInputThe shared, row-level dataset.
transformTransform | Transform[]Applied once to the shared data.
chartsSlot[]Two to four chart specs or elements. Give each select: true (or a field name) and a stable id, and leave out data.
columnsnumberPreferred columns. Default two; fewer when charts would be narrower than minChartWidth.
minChartWidthnumber260Narrowest a chart may get before the grid drops a column.
filtersbooleantrueShow the filter line (filter-chips).
hintstring"Click a mark to filter the other charts"Shown in the filter line while nothing is selected.
labelsRecord<string, string>Display names for the fields in the chips.
countbooleanfalseShow the filtered row count at the end of the filter line.
unitstring"rows"Noun for the count.
selectionsRecord<string, Selection>Controlled selections, keyed by chart id.
onSelectionsChange(selections) => voidCalled when the selections change.
titlestringHeading for the group.
subtitlestringMeasure, population and period shared by the charts.
sourcestringShown under the grid as "Source: ...".
notestringMethod note or caveat.
childrenReactNodeJSX alternative to charts.
beforeSlot | Slot[]Content rendered inside the shared store above the grid: figures, text, a custom component that calls useInsightData(), or a spec that omits data (e.g. stat-row, data-table). It sees the same filtered rows as the charts.
afterSlot | Slot[]Content rendered inside the shared store below the grid, e.g. a detail table of the filtered rows.
gapnumber24Space in px between the before slot, the grid and the after slot.
themeThemeInputTheme override, passed on to every chart.
mode"auto" | "system" | "light" | "dark""auto"Colour mode.