Skip to content
quartiledocsv0.1
GitHub

BoxPlot

PreviewSVGPublishes selection

Summarizes how a value is distributed in each category: median, quartiles, whiskers and outliers.

Playground

Order value by region
Sep 7 – Oct 6, 2026 · every order

Amount by Region, 5 groups. Highest median: Middle East & Africa ($114.31). Lowest median: Europe ($106.32). Widest middle half: Asia Pacific ($73.38 to $177.33).

Order value by region
RegionMinQ1MedianQ3Maxn
North America$25.56$70.21$109.01$169.68$359.601,380
Europe$25.35$70.46$106.32$172.11$359.33903
Asia Pacific$25.44$73.38$113.41$177.33$357.27558
Latin America$26.25$72.83$107.05$174.31$352.33271
Middle East & Africa$26.74$71.53$114.31$163.61$352.63183
orientation
whiskers
order
<BoxPlot
  data={orders}
  category="region"
  value="amount"
  order={REGIONS}
  select
/>

Installation

BoxPlot is exported from @quartile/react, alongside every other chart and component.

git clone https://github.com/zinnoberHaus/quartile

Not on npm yet: build the package from the clone as described in Installation. The preview API may change before publication.

Usage

Pass raw rows: the quartiles are computed per category. Tukey whiskers reach the furthest value within 1.5 × IQR and plot the rest as outliers.

import { BoxPlot } from '@quartile/react';

// orders: { region: 'Europe', amount: 128.5 }, …
type Order = { region: string; amount: number };

export function OrderValueByRegion({ orders }: { orders: Order[] }) {
  return <BoxPlot data={orders} category="region" value="amount" order="median" select />;
}
With select, clicking a box (or Enter on it) toggles its category in the nearest <Selection>; Shift adds to the selection. See Linked selections.

Props

PropTypeDefaultDescription
datarequiredDataInput<R>—Rows to summarize, or a dataset with a schema attached.
categoryrequiredkeyof R & string—Categorical field: one box per value.
valuerequiredkeyof R & string—Quantitative field summarized in each box.
orientation'horizontal' | 'vertical''horizontal'Horizontal draws one row per category (the default); vertical draws columns.
whiskers'tukey' | 'minmax''tukey'Tukey whiskers reach the furthest value within 1.5 × IQR and plot the rest as outliers.
orderreadonly string[] | 'median'—Category order: an explicit list, or "median" for highest median first.
zeroboolean—Starts the value axis at zero. Defaults to true for all-positive data.
formatFormatter—Formats value. Defaults to the field's schema format.
selectbooleanfalseClick (or Enter) toggles the category in the selection. Shift adds.
idstring—Publisher id for the selection. Defaults to a generated id.
selectionstring | false—Selection to read from and publish to. Defaults to the nearest; false opts out.
onSelect(predicate: Predicate | null) => void——
Frame and state props shared with the charts (11) · ChartBaseProps, ChartStateProps
PropTypeDefaultDescription
heightnumber—Plot height in px. Width always fills the container.
classNamestring——
styleCSSProperties——
aria-labelstring—Accessible name. A summary of the data is generated and rendered as hidden text inside the figure.
view'chart' | 'table'—table renders the same data as a table, with the same formats, at the chart's size. Large lazy tables expose a data-view control rather than mounting every hidden row.
tooltipNotestring—Plain-text context shown with tooltips and included in the accessible chart description.
loadingboolean | string—Shows the loading state at the chart's size, so the layout never jumps.
errorboolean | string | Error | null—Shows the error state. A string or Error becomes the message.
errorCodestring—Shown in the error state; copyable for support.
onRetry() => void——
empty{ title?: string; description?: string; action?: ReactNode }—Title and description for the empty state. Shown when there are no rows.

Accessibility

Keyboard
Tab into the plot, arrow keys between boxes, Home and End to jump. With select, Enter or Space toggles the focused box and Shift adds it.
Screen readers
A summary names the highest and lowest medians and the widest middle half. The focused box is announced with its statistics.
Table fallback
Screen readers always get a table of the plotted values with the same formats. view="table" shows it at the chart's size.
Report an issueBuilt Oct 21, 2026