## Histogram (S—296)

A distribution with adjustable bins: drag the bin slider, hover a bar for its range, and see median and spread marks.

- URL: https://sundaeui.dev/components/histogram
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/histogram.json`
- Tags: bins, chart, statistics, data, histogram, distribution

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.

### Usage

```tsx
import { Histogram } from '@/components/sundae/histogram'

<Histogram />
```

### Props

- `values` (`number[]`, required): Raw values.
- `bins` (`number`, default `12`): Initial bin count.
- `unit` (`string`, default `'ms'`): Value unit.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Latency, order values, test scores: anywhere the shape matters.

### When not to use

- Comparing categories: use bars.

### 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.