Small multiples

Pro

A grid of the same chart for different groups.

Installs components/ui/small-multiples.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add @caliper/small-multiples

Tickets solved per team

Tickets solved per team
Period	Platform	Web	Mobile	Data	Support	Sales	Design	Finance
Jan	59	56	53	62	58	50	59	55
Feb	64	61	59	68	66	54	51	49
Mar	63	57	63	69	63	54	48	42
Apr	68	60	63	66	70	53	45	36
May	70	56	65	74	71	55	40	37
Jun	70	54	63	71	68	59	43	40
Jul	65	56	59	74	65	58	37	40
Aug	69	61	65	82	74	50	30	35
Sep	65	64	62	84	82	47	33	31
Oct	70	65	59	90	85	42	37	31
Nov	71	66	61	92	87	39	34	29
Dec	75	70	64	95	90	37	32	27

When to use #

Use it for

Comparing shapes across many groups.

Skip it when

A single series.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/small-multiples

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { SmallMultiples } from "@/components/ui/small-multiples"

The worked example comes with Pro

The 18-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

SmallMultiples

component

PropTypeDefault

label *string—

series *readonly MultipleSeries[]—

xLabels *readonly string[]—

format((n: number) => string)(n) => n.toLocaleString("en-US")

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

Period	Platform	Web	Mobile	Data	Support	Sales	Design	Finance
Jan	59	56	53	62	58	50	59	55
Feb	64	61	59	68	66	54	51	49
Mar	63	57	63	69	63	54	48	42
Apr	68	60	63	66	70	53	45	36
May	70	56	65	74	71	55	40	37
Jun	70	54	63	71	68	59	43	40
Jul	65	56	59	74	65	58	37	40
Aug	69	61	65	82	74	50	30	35
Sep	65	64	62	84	82	47	33	31
Oct	70	65	59	90	85	42	37	31
Nov	71	66	61	92	87	39	34	29
Dec	75	70	64	95	90	37	32	27

Period	Platform	Web	Mobile	Data	Support	Sales	Design	Finance
Jan	59	56	53	62	58	50	59	55
Feb	64	61	59	68	66	54	51	49
Mar	63	57	63	69	63	54	48	42
Apr	68	60	63	66	70	53	45	36
May	70	56	65	74	71	55	40	37
Jun	70	54	63	71	68	59	43	40
Jul	65	56	59	74	65	58	37	40
Aug	69	61	65	82	74	50	30	35
Sep	65	64	62	84	82	47	33	31
Oct	70	65	59	90	85	42	37	31
Nov	71	66	61	92	87	39	34	29
Dec	75	70	64	95	90	37	32	27