# Histogram

Show how often values such as request latency fall into equal-width intervals.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Histogram } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Histogram label="Request latency distribution" xLabel="Latency (ms)" countLabel="Requests" start={0} binWidth={50} counts={[5, 16, 34, 49, 41, 28, 17, 9, 4, 0]} />
    </FloodRoot>
  );
}
```

## Design notes

- Supply precomputed nonnegative integer counts in ascending bin order. Every bin shares binWidth. Keep interior zero bins so the numeric scale stays continuous.
- Count each observation in exactly one interval. A typical convention includes the lower boundary and excludes the upper boundary, with the last upper boundary included if needed.
- Compare histograms on the same numeric boundaries and maxCount. Set showXAxisLabel to false when the title already supplies the unit. Hover, tap or use the keyboard to inspect an interval and its exact count.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `xLabel` | `string` | `Required` |
| `showXAxisLabel` | `boolean` | `—` |
| `start` | `number` | `Required` |
| `binWidth` | `number` | `Required` |
| `counts` | `readonly number[]` | `Required` |
| `maxCount` | `number` | `—` |
| `countLabel` | `string` | `—` |
| `formatBoundary` | `(value: number) => string` | `—` |
| `formatCount` | `(count: number) => string` | `—` |
| `emptyLabel` | `string` | `—` |
| `navigationLabel` | `string` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |