React Statistical Charts
Experimental data is meaningless without distribution and error. Three charts cover it: Histogram bins a sample and overlays the mean and ±σ (with n / µ / σ readouts), BoxPlot shows quartiles, 1.5×IQR whiskers, and outliers as open circles across groups, and ScatterErrorBars plots points with symmetric error bars and an optional connecting line. All computed client-side from raw values — hand them arrays, not pre-binned data.
Yield distribution — histogram with µ ± σ
n = 400µ = 93.621 %σ = 1.417
Yield by source — box plot with outliers
values in % · box = IQR, whiskers = 1.5×IQR, ○ = outliers
I–V measurement — scatter with error bars
Installation
npx shadcn@latest add stat-charts.json
Usage
Loading...
Props
| Component | Key props | Description |
|---|---|---|
| Histogram | values: number[], bins?, unit?, showStats? | Distribution with µ ± σ overlay |
| BoxPlot | groups: { label, values }[], unit? | Quartiles, whiskers, outliers per group |
| ScatterErrorBars | points: { x, y, error? }[], xLabel?, yLabel?, connect? | Points with symmetric y error bars |