React Pareto Chart
Most of the damage comes from a few of the causes. A Pareto chart ranks them, overlays the cumulative share, and marks where the "vital few" end — turning a defect table into a decision about where the next engineer-week goes.
Wafer scrap by failure mode — last 30 days
4 of 9 categories account for 85% of the total.
| # | Category | Count | Share | Cumulative |
|---|---|---|---|---|
| 1 | Particle contaminationLitho track, bay 3 | 412 | 36.7% | 36.7% |
| 2 | Overlay misregistrationScanner 2 drift | 287 | 25.5% | 62.2% |
| 3 | CMP dishing | 164 | 14.6% | 76.8% |
| 4 | Etch depth OOS | 98 | 8.7% | 85.5% |
| 5 | Photoresist defect | 61 | 5.4% | 90.9% |
| 6 | Metal void | 44 | 3.9% | 94.8% |
| 7 | Edge bead | 29 | 2.6% | 97.4% |
| 8 | Handling scratch | 18 | 1.6% | 99.0% |
| 9 | Misc / uncategorized | 11 | 1.0% | 100.0% |
Installation
Props
| Prop | Type | Description |
|---|---|---|
| items | ParetoItem[] | { label, value, note? } — any order |
| title | string | Chart heading |
| unit | string | Appended to the total, e.g. " dies" |
| threshold | number | Cumulative share defining the vital few (default 0.8) |
| showTable | boolean | Ranked table under the chart (default true) |
| height | number | SVG height (default 280) |
The component sorts, computes each category's share, and accumulates the running total — pass items in whatever order you have them. Bars inside the threshold are drawn in the primary colour; the trivial many recede to muted, and the table underlines the cutoff row.
Reading it, and its limits
The bars use the left axis (counts); the line uses the right axis (cumulative %). Where the line crosses the dashed threshold is your answer: everything to the left is where the leverage is.
Two honest caveats worth knowing before you present one:
- Pareto ranks by frequency, not by cost or severity. The most common defect is not always the most expensive one. If a rare failure scraps a whole lot, weight
valueby cost rather than count — the component does not know the difference, and the label should say which you used. - A flat Pareto is a real result. If no small set of categories dominates, the 80/20 framing does not apply and forcing it hides that. The header states the actual share the vital few reach, so a genuinely even distribution reads as one rather than being dressed up.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.