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
- collection
- Frontier
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
- hover · rove · click…
Hover, or use ←/→ within a row and ↑/↓ between a parent and its children — each announces its share.
import { PartitionStrip } from "@microcharts/react/partition-strip/interactive";// bundle — real values under “Sample data” below<PartitionStrip data={bundle}/>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 },];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
Bundle composition — JS is 44% of the payload.
| JS | 44% | |
| CSS | 24% | |
| img | 18% |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
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, press Escape, or
press outside the chart. 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.