Linked Small Multiples
Several compact charts share one reading position while keeping each metric's identity visible, instead of asking readers to inspect four separate tooltips.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
SunOne reading position, 4 metrics
Revenue$59kConversion5.4%Retention82%Sessions36k
Weekly metric comparisonFocus the collection and use arrow keys to move one shared reading position across every mini chart.
Revenue
Sun$59k
Conversion
Sun5.4%
Retention
Sun82%
Sessions
Sun36k
Pointer, touch and keyboard move one shared crosshair; each metric keeps its own direct value label.
Purpose
Several compact charts share one reading position while keeping each metric's identity visible, instead of asking readers to inspect four separate tooltips.
Good for
- Comparing several aligned metrics without building a dashboard wall
Avoid for
- Unaligned series or charts that need independent time ranges
Usage
tsx
<LinkedSmallMultiples charts={metrics} label="Metric comparison" />Accessibility
- One focusable group moves the shared reading position with Arrow/Home/End.
- A direct value rail publishes every metric at the current label instead of making users inspect four tooltips.
Performance
- Each mini chart renders one path and one marker; selection is one shared index.
Related: interactive-line-chart, comparison-chart.
Source: packages/skills/data/linked-small-multiples.md