SmallMultiples
Compare series and read the change behind them, with the axes, legend and tooltip already wired.
@luc/ui/chartsWhat it shows
Compare the same measure across several panels on one shared scale, making shape differences easier to scan.
Live preview
One shared caption and four panels on the same scale, which is what makes them comparable.
<SmallMultiples columns={2} label="Rolling volatility">
{windows.map((panel) => (
<SmallMultiple key={panel.window} title={panel.window} aside={panel.latest}>
<Sparkline values={panel.values} tone="accent" fill />
</SmallMultiple>
))}
</SmallMultiples>Usage
The values are prepared by the caller: this component draws the points it is given and computes no statistic of its own, so units, scaling and any summary have to be settled before the data reaches it.
It is drawn by the ECharts engine.
Worked examples with real data are on the family overview: General
import { SmallMultiples } from "@luc/ui/charts";<SmallMultiples columns={2} label="Rolling volatility">
{windows.map((panel) => (
<SmallMultiple key={panel.window} title={panel.window} aside={panel.latest}>
<Sparkline values={panel.values} tone="accent" fill />
</SmallMultiple>
))}
</SmallMultiples>Data contract
Compose `SmallMultiples` from `SmallMultiple` children, each with a `title` and a chart or `Sparkline`. The panels must represent the same measure and comparable domain.
Important configuration
Set `columns` for the reading grid, keep one shared caption, and keep the y scale identical across panels; `aside` is for a short panel annotation.
Guidelines
When not to use
Do not use small multiples for unrelated measures or silently vary each panel's scale; that turns a comparison into a visual collage.
Configuration
| Export | Kind | Signature |
|---|---|---|
SmallMultiples | 3 documented props | ({ className, children, columns, label, legend, ...props }: SmallMultiplesProps) => import("@types/react").JSX.Element |
SmallMultiples props
Type: SmallMultiplesProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
columns? | 1 | 2 | 4 | 3 | undefined | — | Panel count that forces a single column (useful on mobile). |
label? | ReactNode | — | Shared caption above the grid, e.g. "Rolling Sharpe (annualised)". |
legend? | ReactNode | — | One shared legend, when every panel plots the same series. |
Accessibility
A chart is a picture of data, so it needs a name that states what it shows, and the numbers must exist as text somewhere on the page — in a table or a written summary — because a drawing is not readable by a screen reader and cannot be copied.
What happens on the server, and when hydration changes it.
Family
General
The shapes every product needs, on the declarative ChartSpec path.
Related