# BoxPlot

Compare the median, quartiles and spread across groups, such as request latency by service.

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, BoxPlot } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <BoxPlot label="Request latency (ms)" items={[
        {id:"api", label:"API", summary:{low:42, q1:74, median:96, q3:128, high:176}, outliers:[203]},
        {id:"search", label:"Search", summary:{low:32, q1:58, median:88, q3:154, high:210}}
      ]} />
    </FloodRoot>
  );
}
```

## Design notes

- Supply a five-number summary for each group. The box spans Q1 to Q3 and the white line marks the median. Supply whiskers and outliers using the same statistical convention across groups.
- Use null for a missing summary. Use the same domain across related charts and include all observations, including outliers.
- Hover, tap or use the arrow keys to inspect the summary and outlier count. Use formatAxisValue for shorter ticks when units are already visible. Set --flood-chart-plot-height on a shared parent to align plot heights with Histogram.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `items` | `readonly BoxPlotItem[]` | `Required` |
| `domain` | `readonly [number, number]` | `—` |
| `formatValue` | `(value: number) => string` | `—` |
| `formatAxisValue` | `(value: number) => string` | `—` |
| `emptyLabel` | `string` | `—` |
| `missingLabel` | `string` | `—` |
| `navigationLabel` | `string` | `—` |
| `statisticLabels` | `Partial<Record<keyof BoxPlotSummary \| "outliers" \| "whiskers", string>>` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role" \| "aria-label">` | `Forwarded` |