# PartitionStrip (/docs/charts/partition-strip)

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.

```tsx
import { PartitionStrip } from "@microcharts/react/partition-strip";

<PartitionStrip
  data={[
    {
      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 },
  ]}
  title="Bundle composition"
/>
```

## Install

```tsx
import { PartitionStrip } from "@microcharts/react/partition-strip";

<PartitionStrip data={bundle} title="Bundle composition" />
```

Setup (package + stylesheet): [Quickstart](/docs/quickstart#set-up-with-an-ai-agent) or paste [`/agent-setup.md`](/agent-setup.md) into your agent.

## Try it

```tsx
import { PartitionStrip } from "@microcharts/react/partition-strip/interactive";

<PartitionStrip
  data={bundle}
/>
```

## 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

**storage cell**

```tsx
<PartitionStrip data={bundle} labels={false} width={80} height={16} />
```

**emphasis**

```tsx
<PartitionStrip data={bundle} emphasis="react" />
```

## Variants

```tsx
<PartitionStrip
  data={[
    {
      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 },
  ]}
  emphasis="react"
/>
```

## Edge cases

```tsx
// no node has children → the parent row alone carries the whole chart,
// the child row stays empty
<PartitionStrip
  data={[
    { label: "img", value: 18 },
    { label: "font", value: 10 },
    { label: "css", value: 6 },
  ]}
  title="Flat parts"
/>
```

```tsx
// squeezed into an 18px row, the parent row can't seat the floor font —
// labels drop cleanly instead of overlapping (width here is generous;
// height is the gate)
<PartitionStrip
  data={[
    {
      label: "JS",
      children: [
        { label: "react", value: 28 },
        { label: "vendor", value: 12 },
      ],
    },
    { label: "CSS", children: [{ label: "tailwind", value: 16 }] },
  ]}
  height={18}
/>
```

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

**In a sentence**

```tsx
<p>
  Bundle composition{" "}
  <span className="mc-inline">
    <PartitionStrip data={bundle} summary={false} />
  </span>{" "}
  — JS is 44% of the payload.
</p>
```

**In a table cell**

```tsx
<td>
  <PartitionStrip data={bundle} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">44%</span>
  <span className="unit">of total size</span>
  <PartitionStrip data={bundle} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  JS <PartitionStrip data={bundle} />
</button>
```

## 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](/docs/accessibility#one-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 | Description |
| --- | --- | --- |
| `data` (required) | `{ 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` | (interactive) Opt-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](/docs/quickstart#the-shared-grammar).