# ParetoStrip (/docs/charts/pareto-strip)

Give it a list of causes with their counts and ParetoStrip sorts them descending, then overlays a **cumulative-share
line on a fixed 0–100% scale** that shows how few of them you would have to fix to account for most of the total. That
scale spans the full plot height and is never rescaled, so the curve can't be steepened. Bars up to the threshold
crossing are accent — the **vital few** — and the rest are muted, which is how the chart says where to stop reading. The
80% default is a reference you can move or turn off, not a law.

```tsx
<ParetoStrip
  data={[
    { label: "Timeouts", value: 38 },
    { label: "OOM", value: 24 },
    { label: "Deploy", value: 15 },
    { label: "Config", value: 9 },
    { label: "Network", value: 7 },
    { label: "Auth", value: 4 },
    { label: "Disk", value: 3 },
    { label: "DNS", value: 3 },
    { label: "Other bug", value: 2 },
  ]}
  unit="causes"
  metric="incidents"
  title="Incident causes"
  width={260}
  height={28}
/>
```

## Install

```tsx
import { ParetoStrip } from "@microcharts/react/pareto-strip";

<ParetoStrip data={causes} unit="causes" metric="incidents" title="Incident causes" />
```

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 { ParetoStrip } from "@microcharts/react/pareto-strip/interactive";

<ParetoStrip
  data={causes}
/>
```

## When to use it

Use it for a "fix these three" read in a KPI card, incident causes or support tags in a tab header, and any long-tail
composition where a few categories dominate. For a plain ranking use MiniBar; for parts of a single whole use
SegmentedBar.

## Sizing

**roll the tail into Other**

```tsx
<ParetoStrip data={causes} maxItems={4} />
```

**no threshold line**

```tsx
<ParetoStrip data={causes} threshold={false} />
```

## Variants

```tsx
const causes = [
  { label: "Timeouts", value: 38 },
  { label: "OOM", value: 24 },
  { label: "Deploy", value: 15 },
  { label: "Config", value: 9 },
  { label: "Network", value: 7 },
  { label: "Auth", value: 4 },
];

<ParetoStrip data={causes} maxItems={3} />
<ParetoStrip data={causes} threshold={false} />
```

`maxItems` rolls the tail into `Other`, drawn at its true size but always last and never counted among the vital few. If
`Other` towers over the top cause, `maxItems` is set too aggressively.

## Edge cases

```tsx
// the first cause alone crosses 80% — one accent bar, the rest muted:
// "Top 1 of 3 causes account for 90% of incidents."
<ParetoStrip
  data={[
    { label: "Timeouts", value: 90 },
    { label: "OOM", value: 6 },
    { label: "Deploy", value: 4 },
  ]}
  unit="causes"
  metric="incidents"
/>
```

```tsx
// all-zero values render no bars and announce "No recorded incidents."
<ParetoStrip data={[{ label: "a", value: 0 }]} metric="incidents" />
```

## Four homes

**In a sentence**

```tsx
<p>
  Incident causes{" "}
  <span className="mc-inline">
    <ParetoStrip data={causes} summary={false} />
  </span>{" "}
  — top 3 causes account for 80%.
</p>
```

**In a table cell**

```tsx
<td>
  <ParetoStrip data={causes} />
</td>
```

**In a KPI card**

```tsx
<div className="kpi">
  <span className="figure">deploy</span>
  <span className="unit">42% of incidents</span>
  <ParetoStrip data={causes} />
</div>
```

**In a tab header**

```tsx
<button className="tab">
  deploy <ParetoStrip data={causes} />
</button>
```

## Accessibility

The accessible name states the vital-few count and its cumulative — **"Top 1 of 3 causes account for 90% of
incidents."** — or, when there is no threshold (or no ranked cause reaches it), the top cause and its share, as in the
rolled-up demo above: **"Timeouts leads at 39%."** The interactive entry steps the bars and announces each bar's share
and running cumulative. **T** jumps to the crossing bar.

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 }[]` | Categories with magnitudes — the component sorts descending. |
| `threshold` | `number \| false` | Cumulative reference line % (default 80 — a working reference, not a law). |
| `maxItems` | `number` | Categories beyond maxItems roll up into Other (default 8, always last). |
| `unit` | `string` | Category noun for the summary (default 'causes'). |
| `metric` | `string` | Total-metric noun for the summary (default 'the total'). |
| `label` | `"count" \| "none"` | 'K of N → cum%' in a right gutter. |
| `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).