BoxPlot
Displays quartiles, medians, whiskers, and outliers for comparing distributions.
Component behavior
BoxPlot displays a distribution by category. The box spans the interquartile range, the center line marks the median, and whiskers extend to the last point within 1.5 times the IQR. Points outside the whiskers render as outliers.
Use cases
- Distribution comparisons across services, cohorts, or runs.
- Latency distributions and tail behavior.
- Inspecting outliers and distribution skew.
Alternatives
Histogram: the task requires a full distribution, including multiple modes.
BarChart: one summary value per category is sufficient.
ScatterPlot: individual points must be shown across two dimensions.
Props
Give each BoxPlotDatum raw values and the chart computes the quartiles, whiskers and outliers with the 1.5×IQR rule. If you already have the summary, pass q1/median/q3 (and optionally min/max/outliers) instead and the computation is skipped.
| Prop | Type | Default | Description |
|---|---|---|---|
data | BoxPlotDatum[] | — | One box per category. Provide raw `values`, or a precomputed five-number summary. Labels are used as React keys. |
height | number | 220 | Plot height in pixels. |
yDomain | [number, number] | — | Pin the shared value axis. Defaults to the data extent, padded. |
ticks | number | 5 | Number of y-axis gridlines and labels. |
formatValue | (value: number) => string | — | Formats axis ticks and tooltip figures. |
boxWidth | number | 40 | Width of each box in pixels. |
Examples
Latency by service (ms)
import { BoxPlot } from "@solarius/onset";
import type { BoxPlotDatum } from "@solarius/onset";