Skip to content
Pinky UI

data

Linked Small Multiples

Several compact charts share one reading position while keeping each metric’s identity visible.

  • data
  • chart
  • small-multiples
  • crosshair
  • comparison

Live preview

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

Sun

5.4%

Retention

Sun

82%

Sessions

Sun

36k

Pointer, touch and keyboard move one shared crosshair; each metric keeps its own direct value label.

Quick usage

usage
import { LinkedSmallMultiples } from "@pinky-ui/systems";

<LinkedSmallMultiples charts={metrics} label="Metric comparison" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
chartsSmallMultiple[]—Aligned labelled series rendered as a shared reading collection.
classNamestring—Styles the outer interaction surface.

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.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Comparing several aligned metrics without building a dashboard wall

When not to use

  • Unaligned series or charts that need independent time ranges

Skill

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.

Open this skill on its own page