Filter chips

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

Use when: Inside any <InsightData> whose charts use select: put it above the charts so readers can see what is filtered, drop one value, or clear everything. linked charts already includes it.
Avoid when: Outside <InsightData> it renders nothing unless you pass selections yourself. It is not a filter builder: selections are made by clicking marks in the charts.

Preview

Filtered by

import { FilterChips } from "insightcharts";

export function Example() {
  return (
    <FilterChips
      labels={{ region: "Region", source: "Source", year: "Year" }}
      selections={{
        "by-region": { field: "region", values: ["Asia", "Europe"] },
        "by-source": { field: "source", values: ["Solar"] },
        "by-year": { field: "year", range: [2020, 2024] },
      }}
    />
  );
}

{
  "type": "filter-chips",
  "labels": { "region": "Region", "source": "Source", "year": "Year" },
  "selections": {
    "by-region": { "field": "region", "values": ["Asia", "Europe"] },
    "by-source": { "field": "source", "values": ["Solar"] },
    "by-year": { "field": "year", "range": [2020, 2024] }
  }
}

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Composition

Built from

Filter chips is built from plain HTML and lists no other component in its composes.

Used in

1 molecule and 1 template use filter chips.

Molecules

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.

Templates

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.

Directly, and throughLinked charts

Installation

$ pnpm dlx shadcn@latest add @insightcharts/filter-chips

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 { FilterChips } from "insightcharts";

Examples

Nothing selected, with a hint

Click a bar to filter

import { FilterChips } from "insightcharts";

export function Example() {
  return (
    <FilterChips selections={{}} hint="Click a bar to filter" />
  );
}

{ "type": "filter-chips", "selections": {}, "hint": "Click a bar to filter" }

Render with import { Insight } from "insightcharts" and <Insight spec={spec} />. Nested specs resolve by name; nothing else to import.

Props

Prop	Type	Default	Description
selections	Record<string, { field, values?, range? }>		Selections to show when there is no surrounding `<InsightData>` (or to override it), keyed by owner. Uncontrolled unless `onSelectionsChange` is given.
onSelectionsChange	(selections) => void		Called when a chip is removed or the reset is pressed; makes `selections` controlled.
labels	Record<string, string>		Display names for field names, e.g. `{ region: "Region" }`.
hint	string		Shown while nothing is selected, e.g. "Click a bar to filter".
resetLabel	string	"Reset"	Text of the clear-all control.
count	boolean	false	Show "1,204 of 5,000 rows" at the end of the line.
unit	string	"rows"	Noun for the count, e.g. "orders".
theme	ThemeInput		Theme override.
mode	"auto" \| "system" \| "light" \| "dark"	"auto"	Colour mode.