React partition strip chart — two-level hierarchy as nested strips of share. Tiny accessible SVG microchart; RSC-safe static or /interactive.

PartitionStrip answers "what is the whole made of — and what are the big parts made of — with parentage visible?". Parents sit on the top row with widths proportional to their share of the whole, and each parent's children tile the exact x-range beneath it. Two aligned rows beat a treemap because alignment is the comparison channel — and two levels is a hard limit, because deeper hierarchies become unreadable texture at this size.

PartitionStrip

interactive · 5.19 kB · static · 2.41 kB

Install

Import & usereact/partition-strip

import { PartitionStrip } from "@microcharts/react/partition-strip";// bundle — real values under “Sample data” below<PartitionStrip data={bundle} title="Bundle composition" />

Sample data

const bundle = [  {    label: "JS",    children: [      { label: "react", value: 28 },      { label: "vendor", value: 12 },      { label: "app", value: 8 },    ],  },  {    label: "CSS",    children: [      { label: "tailwind", value: 16 },      { label: "custom", value: 8 },    ],  },  { label: "img", value: 18 },  { label: "font", value: 10 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — bundle / storage / budget composition, two-level breakdowns.
Avoid for — deep hierarchies (unreadable at this size) or flat parts (SegmentedBar).

Sizing

Variants

emphasis

Edge cases

flat data (no children)

labels drop out

Four homes

Why this default

Two aligned rows because alignment is the comparison — you can see at a glance that a child sits under its parent and how much of it that child is. A treemap discards that alignment and a flat SegmentedBar discards the hierarchy entirely. Grandchildren are ignored with a dev warning, on purpose: three levels of nesting at 24px is texture, not information.

Accessibility

The accessible name names the biggest leaf and its parent — "3 groups, 5 parts; largest JS → react (31% of the whole)." The interactive entry roves within a row with ←/→ and moves between a parent and its children with ↑/↓, announcing each node's own value, its share of the whole, and its share of its parent. The readout chip stacks the same figures as rows so the value is never traded away for width.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data*	{ label, value?, children? }[]	Two-level hierarchy.
emphasis	string	Accents one node and its lineage.
labels	boolean	Parent-row labels with size drop-out.
colors	string[]	Per-group colours, cycled; overrides --mc-cat-N. Accent/neutral roles keep.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.