Histogram
A distribution with adjustable bins: drag the bin slider, hover a bar for its range, and see median and spread marks.
histogram.tsxhistogram.css
Checking access…
Overview
Values are binned live as the bin count changes. Bars touch, as a histogram should, and the median and the middle 50% are marked above the axis.
Focusing a bar announces its range and count; the summary line gives n, mean and median.
When to use
- Latency, order values, test scores: anywhere the shape matters.
When not to use
- Comparing categories: use bars.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/histogram.json$
npx shadcn@latest add https://sundaeui.dev/r/histogram.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/histogram.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/histogram.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy histogram.tsx and histogram.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { Histogram } from '@/components/sundae/histogram'
<Histogram />Props
| Prop | Type | Default |
|---|---|---|
values*Raw values. | number[] | — |
binsInitial bin count. | number | 12 |
unitValue unit. | string | 'ms' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Bars are focusable with range and count in the label.
- The bin slider is a labelled range input.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-hst; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Histogram free?
- Histogram is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Histogram?
- Run npx shadcn@latest add https://sundaeui.dev/r/histogram.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Histogram support keyboard and screen readers?
- Bars are focusable with range and count in the label. The bin slider is a labelled range input.
- Does Histogram respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Scatter Plot
Data · Refined - Pro
Activity Rings
Data · Expressive - Pro
Heatmap Grid
Data · Understated - Pro
Tick Gauge
Data · Refined