PartitionStrip
PartitionStrip shows a two-level breakdown as two aligned rows, each parent's children tiling the x-range beneath it.
- encodes
- width = share of whole, children aligned under parents
- precision
- high / medium
- nodes
- 1 per segment, cap 24
The top row is the whole: one bar per parent, width proportional to its share. The row beneath it holds each parent's children, tiling the exact x-range of their parent, so parentage reads out of the alignment. Alignment is the comparison channel here, which a treemap discards and a flat SegmentedBar drops along with the hierarchy. Two levels is a hard limit: deeper nesting becomes texture at this size.
Install
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 },];Try it
When to use it
Use it for bundle, storage, or budget composition, and for any two-level breakdown. Deep hierarchies are unreadable at this size, and flat parts belong in SegmentedBar.
Sizing
Variants
Edge cases
Data with no children anywhere renders as the parent row alone; the child row stays empty. Height, not width, is what drops the labels: below the floor font size they drop out rather than overlap. Grandchildren are ignored with a dev warning, since three levels of nesting at 24px is texture rather than information.
Four homes
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.