Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Pareto Chart Stats Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A Pareto chart for React with Base 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.

What moves, and what happens with reduced motion?

The header and the split fade up once, the bars grow from the baseline and the cumulative line draws from the first bar to the last. With reduced motion all of it is off and the finished chart is there.

How does it fit on a phone?

The chart comes first and the list under it with a rule between them. The bar labels give way to the rank numbers 1 to 7, which the list uses as well, so each bar is easy to match. Nothing scrolls sideways at 320 pixels.

  • Pro

    Count Buckets Histogram Stats

    Distributions

    An order-value histogram of eight $25 buckets with the count above each column, the most common bucket drawn solid, the median bucket underlined and three figures above the chart: orders, the median bucket and the busiest bucket's share.

  • Pro

    Horizontal Bar Chart Card Stats

    Bar and column

    Nine ranked survey answers where each row is its own bar: a quiet fill from the start behind the label, the share and the count at the end, and the leading row a little stronger.

  • Pro

    Waterfall Chart Stats

    Bar and column

    A quarter's operating profit walked from last quarter to this one in six floating bars with hairline connectors, totals at full weight, gains at 60% and losses as outlines, with the net change in the header.

  • Pro

    Dropoff Rate Funnel Stats

    Funnels

    A leak-first funnel for an onboarding tool: five steps, each a solid bar of who got that far followed by a hatched ghost of who was lost, the drop rate as the big figure, and the biggest leak ringed with a badge.

  • Pro

    Log Frequency Table Stats

    Tables

    A log-analytics table of five severity levels with the count, the lines a minute, and a bar whose length is the logarithm of the count, plus a filter that dims the quieter levels.

  • Pro

    Stacked Bar Chart Stats

    Bar and column

    Twelve weeks of support tickets stacked by priority in three foreground weights, with toggles that double as the legend: switch a priority off and the stack, the scale and every total re-read.

All 122 stats blocks