Skip to content
InsightCharts

Search

Search guides and components

Small multiples

Repeats one small line, area or bar chart per value of a facet field on a shared scale, each panel titled.

Use when
The same measure for 4 to about 24 entities when one chart would have too many overlapping lines; pair with highlight to pick out one panel, or context to show every other line faintly behind each.
Avoid when
Three or fewer series (use line chart with direct labels); when exact comparison between two entities matters most (use line chart with highlight); a single value per entity (use bar chart).

Preview

Greek unemployment fell from 27.5% in 2013 to 10.1% in 2024

Unemployment rate, 2010 to 2024, same scale in every panel

Source: Eurostat (rounded) · Figures are approximate, for illustration

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

1 template uses small multiples.

Templates

1

Visual essay

A long article read by scrolling. It has a headline, then an ordered list of blocks in a reading column, then a source note. The blocks are prose, figures, charts with a callout, scrolly sequences, pull quotes, stat rows, small multiples and chapter breaks. Exhibits can be wider than the column.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/small-multiples

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

Examples

Every other line as context

Chicago's average monthly temperature ranges from -3.2°C to 24.3°C

Average monthly temperature, °C. Honolulu ranges from 23.0 to 27.9. Grey lines show the other cities.

Source: NOAA climate normals (rounded) · Figures are approximate, for illustration

Bars, two series per panel (wide data)

The South sold $45 million online and $36 million in store in Q4

Quarterly sales by channel, $ millions

Illustrative figures.

Stress: 20 panels with long titles

Illustrative index for 20 countries, 2013 to 2024

Index, 2013 = 100. All panels share the same axes.

Synthetic data for layout testing.

Props

PropTypeDefaultDescription
facetrequiredstringField whose values each get a panel.
xrequiredstringTime or ordered category field, shared by every panel.
yrequiredstring | string[]Value field, or several (one series each in every panel).
seriesstringField that splits rows into series inside each panel (long data).
kind"line" | "area" | "bar""line"What each panel draws. Area and bar panels start at zero.
columnsnumberPreferred number of columns; reduced automatically on narrow containers.
scales"shared" | "free""shared"Shared value scale across panels, or each panel on its own (say so in the subtitle).
contextbooleanfalseDraw every other panel's line faintly behind each panel's own.
latestbooleanPrint the latest value beside each panel title. Default: on for a single series.
namesRecord<string, string>Display names for facet values and series keys.
Common chart props 29

Every chart built with defineChart accepts these on top of its own props.

PropTypeDescription
dataDataInputRows, CSV text, a URL, { url, path }, an async function, or an Arrow-style table. Omit inside <InsightData>.
transformTransform | Transform[]A pipeline of transforms applied before drawing.
titlestringThe title. One plain statement of what the data shows, with the number and the period ("Monthly churn fell from 4.2% to 2.1% in 2024"), or a plain label ("Monthly churn, 2024"). One clause, no figures of speech.
subtitlestringMeasure, unit, population, period.
sourcestringData source, shown as "Source: ...".
notestringMethod notes or caveats.
heightnumber | stringCSS height of the plot. Default 360.
aspectnumberWidth / height. Overrides height.
highlightstring | string[]The entity (or entities) the title is about. Every other series is drawn in grey.
annotationsAnnotation[]Reference lines, shaded bands and callouts, in data coordinates.
formatFormatSpecHow to print values: "compact", "percent", "currency:USD", "{value} kg", Intl options, or a function.
legendbooleanShow the legend. Default: shown when there are two or more series.
selectboolean | stringMake marks clickable to filter. Inside <InsightData> the selection filters every other chart. Pass a field name, or true to use the chart's category field.
onSelect(values: string[], field: string) => voidCalled with the selected values whenever the selection changes.
optionEChartsOption | ((option: EChartsOption, ctx: BuildContext) => EChartsOption)Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers.
themeThemeInputA theme, or a partial set of tokens merged over the surrounding theme, for this chart only.
modeModeInput"auto" (default) follows the page, "system" follows the OS, or force "light" / "dark".
rendererRendererInput"auto" (default) uses SVG for light charts and canvas for heavy ones.
animatebooleanSet false to disable animation. Reduced-motion preferences are always respected.
lazybooleanMount the chart only when it scrolls near the viewport. Default true.
groupstringLink tooltips with other charts sharing this group id.
exportableboolean | ExportFormat[]Show an export menu: true or a list of formats from png, jpeg, svg, pdf, csv, json.
tablebooleanShow a collapsible "View data" table under the chart.
altstringAccessible description: the chart type and measures, then the main pattern and the notable values.
idstringStable id for this chart's selection in the shared store.
onEventsRecord<string, ChartEventHandler>ECharts event handlers, e.g. { click: (params, chart) => {} }. Prefix a name with zr: to bind to the canvas itself.
onReady(chart: EChartsInstance) => voidCalled with the ECharts instance once it is created.
classNamestringClass name for the outer <figure>.
styleCSSPropertiesInline style for the outer <figure>.