ParetoStrip ranks causes by size and marks where their cumulative share crosses the threshold.

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.

ParetoStrip

interactive · 5.46 kB · static · 2.83 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

Live playground

onActive

idle

—

hover · rove · click…

Hover or arrow across the bars — each announces its share and the running cumulative; T jumps to the 80% crossing.

threshold · 80

maxItems

label

readout

animate

import { ParetoStrip } from "@microcharts/react/pareto-strip/interactive";// causes — real values under “Sample data” below<ParetoStrip  data={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 },];

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

no threshold line

Variants

rollup + no threshold

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

one dominant cause

zero total

Four homes

In a sentence

Incident causes — top 3 causes account for 80%.

In a table cell

deploy		42%
config		28%
network		18%

In a KPI card

Top cause

deploy42% of incidents

In a tab header

deployconfignetwork

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 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, press Escape, or press outside the chart. 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.