BoxPlot

Quartile boxes, whiskers, and outlier dots per category, computed by the chart from raw samples: quartiles by linear interpolation, whiskers at the most extreme data inside the 1.5 IQR fences, outliers beyond them. Scrub a category to flag its five-number summary; each category's summary also folds into the accessible name.
Latency by region
iOS
Latency by region
Android
Latency by region
Web
tsx
<BoxPlot
title="Latency by region"
data={[
{ label: "us-east", values: [42, 38, 51, 44, 47, 39, 96] },
{ label: "eu-west", values: [55, 61, 58, 64, 57, 63] },
{ label: "ap-south", values: [71, 78, 74, 83, 76, 124] },
]}
/>

Props

Prop
Description
data
required
BoxSample[]
One box per category, in order.
title
string
Optional heading shown above the plot.
success
boolean
Tone (pick one; default primary). Precedence: success > destructive.
destructive
boolean
Tone (pick one; default primary). Precedence: success > destructive.
compact
boolean
Density (omit for the default plot size).
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats tick labels, the flag, and the accessible name.
selected
number | null
Scrub-to-inspect: the selected category index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected category (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a category (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

BoxPlot

Don’t
us-east
eu-west
A bar of averages hides the spread and the outliers, which are the point of comparing distributions.
Do
Latency by region
Compare distributions with the full five-number anatomy: box, whiskers, median, outliers.
← BarList
BulletChart →