React pareto strip chart — sorted causes with a cumulative reference line. Tiny accessible SVG microchart; RSC-safe static or /interactive.

ParetoStrip answers "what should we fix first?". It sorts the categories descending and overlays a cumulative-share line on a fixed 0–100% scale that spans the full height and is never rescaled to steepen the curve. The bars up to the threshold crossing are accent — the vital few — and the rest are muted, because the chart's one job is to say where to stop reading. 80% is a working reference, not a law, and Other never re-enters the ranking.

ParetoStrip

interactive · 5.08 kB · static · 2.58 kB

Install

Import & usereact/pareto-strip

import { ParetoStrip } from "@microcharts/react/pareto-strip";// causes — real values under “Sample data” below<ParetoStrip data={causes} unit="causes" metric="incidents" title="Incident causes" />

Sample data

// incident causes by count — a few dominateconst 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 },  { label: "Disk", value: 3 },  { label: "DNS", value: 3 },  { label: "Other bug", value: 2 },];

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — a "fix these three" read in a KPI card, incident causes or support tags in a tab header, any long-tail composition where a few dominate.
Avoid for — a plain ranking (MiniBar) or parts of a single whole (SegmentedBar).

Sizing

Variants

rollup + no threshold

Edge cases

one dominant cause

zero total

Four homes

Why this default

The accent stops at the crossing, because the chart's one job is to say where to stop reading. The cumulative scale is fixed 0–100% and shares the full plot height — never rescaled to make the curve look steeper — and 80% is a reference default you can move or turn off, never a claimed law. Other is rendered honestly at its true size but always last and never counted among the vital few; if it towers over the top cause, that usually means maxItems is set too aggressively.

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: 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 }[]	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	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.