# BoxPlot

> Box-and-whisker plot: median, quartiles, Tukey whiskers, outliers and the mean for every category, optionally grouped by series.

Source: https://ui.jcsoftdev.com/docs/components/box-plot

Box-and-whisker plot: median, quartiles, Tukey whiskers, outliers and the
mean for every category, optionally grouped by series.

## Import

```ts
import { BoxPlot } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/box-plot`.

## Usage

```tsx
<BoxPlot
  title="Duración del corte por barbero"
  categories={barbers}
  series={[{ id: "corte", name: "Corte", data: haircutMinutes }]}
  valueFormat={minutes}
  valueAxis={{ title: "min" }}
  orientation="vertical"
  whisker={1.5}
  showMean
  showOutliers
  height={320}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the chart and caption of its data table. |
| `categories` * | `readonly string[]` |  | One box (per series) for each category, e.g. the barbers. |
| `series` * | `readonly DistributionSeries[]` |  | `data[i]` holds the raw samples of `categories[i]`. Several series are drawn side by side. |
| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` | "vertical": boxes stand on the x axis. "horizontal": one row per category. |
| `valueFormat` | `ValueFormat` |  |  |
| `valueAxis` | `DistributionAxisOptions` |  |  |
| `whisker` | `number` | `1.5` | Tukey fence multiplier; `Infinity` stretches the whiskers to min and max. |
| `showMean` | `boolean` | `true` | Diamond on the mean. |
| `showOutliers` | `boolean` | `true` | Dots for values outside the whiskers. |
| `showPoints` | `boolean` | `false` | Every raw observation as a dot over the box, with deterministic jitter. |
| `jitter` | `number` | `0.7` | Share (0-1) of the box width the dots spread over. |
| `pointColor` | `"value" \| "series"` | `"series"` | "value" grades each dot from pale to full colour across the value range. |
| `seed` | `number` | `11` | Seed of the jitter, so the dots are stable between renders. |
| `height` | `number \| "fill"` | `320` | Height of the drawing in pixels. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `legend` | `boolean \| "top" \| "bottom"` |  | Shown automatically with more than one series. |
| `grid` | `boolean` | `true` |  |
| `tooltip` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `animate` | `boolean` | `true` |  |
| `labels` | `Partial<DistributionLabels>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-boxplot--default)
- [Horizontal](/storybook/?path=/story/charts-boxplot--horizontal)
- [Grouped By Series](/storybook/?path=/story/charts-boxplot--grouped-by-series)
- [With Points](/storybook/?path=/story/charts-boxplot--with-points)
- [Jitter](/storybook/?path=/story/charts-boxplot--jitter)
- [Average Ticket](/storybook/?path=/story/charts-boxplot--average-ticket)
- [Whiskers To Extremes](/storybook/?path=/story/charts-boxplot--whiskers-to-extremes)
- [Narrow](/storybook/?path=/story/charts-boxplot--narrow)
- [Loading](/storybook/?path=/story/charts-boxplot--loading)
- [Empty](/storybook/?path=/story/charts-boxplot--empty)

## Source

`packages/ui/src/charts/box-plot/box-plot.tsx`