ParetoStrip
ParetoStrip ranks causes by size and marks where their cumulative share crosses the threshold.
- encodes
- descending bar magnitude + cumulative-share line on a fixed 0–100% scale
- precision
- high
- nodes
- 1 per bar + 4
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.
Install
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 },];Try it
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
Variants
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
Four homes
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.