shadcn.io is not affiliated with official shadcn/ui
Pareto Chart Stats Block for Ark UI
A defect Pareto: seven bars sorted largest first, a cumulative line on a second axis, an 80% line and a bracket over the vital few, with a list of every cause's count, share and running share.
Installation
Overview
A Pareto chart for React with Ark UI. A start-aligned header says how few causes explain most defects ("4 causes make up 87% of defects"). Under a band's top rule, a split: at the start (two thirds) the chart, at the end a list. The chart has seven bars sorted from the biggest cause down with "other causes" kept last, a cumulative line that climbs from the first bar's share to 100% against a second axis at the end, a hairline at 80%, and a bracket over the bars it takes to cross it, "the vital few", whose bars are drawn at full strength while the rest sit at 30%. The count axis and the percent axis share their gridlines, so a bar's height and the line's height read against the same scale. The list gives each cause with its count, its share and its running share. The sort, the whole-percent shares (rounded by the largest-remainder method so they add to 100), the running line, the vital few and the headline are all derived from one list of counts. For quality, support and operations: any "few things cause most of it" story.
FAQ
How do I change the causes and the threshold?
Edit CAUSES (a name, a short name for the axis and a count; any order) and THRESHOLD. The block sorts them, keeping "Other" last, then computes the shares, the running line, the number of vital few and the headline. If you have more or fewer than seven causes, change the seven-column grids to match.
Why do the shares always add to 100?
Each share is rounded down and the leftover points go to the largest remainders, so seven rounded shares never add to 99 or 101. The running line is the running sum of those shares, so the list, the line and the 100% at the end agree.
How do the two axes line up?
The count axis runs from zero to the total of all defects and the percent axis from 0 to 100%, so a bar's height in counts and in percent is the same height. That is also why the line ends in the top corner at 100%.
Is it accessible?
The drawing is hidden from assistive technology; the list beside it is the text version, with every cause's name, count, share and running share, and the figure's caption repeats them in one sentence. The axes and bracket are decorative. Numbers sit in bdi elements and the chart is left to right in right-to-left pages, because bars sort from the biggest at the start in every language.