Skip to content
InsightCharts

Search

Search guides and components

Box plot

Summarises a numeric field per group as median, quartile box, whiskers and outlier dots, computed from raw rows.

Use when
Comparing the centre and spread of a numeric value across several groups, especially with many rows per group and an audience comfortable with quartiles.
Avoid when
A general audience or fewer than about 20 rows per group (use strip plot or beeswarm chart, which show the observations themselves); one group whose shape matters, such as two peaks, which a box hides (use histogram).

Preview

The median emergency wait was 44 minutes

Minutes from arrival to being seen, sampled visits by department

Illustrative data. Box: middle half of visits; line: median; whiskers: within 1.5 × IQR; dots: outliers.

Composition

  1. Atoms61
  2. Molecules19
  3. Templates20

Used in

No molecule or template lists box plot in its composes. It still fits any slot that takes a component.

Installation

$ pnpm dlx shadcn@latest add @insightcharts/box-plot

The CLI copies the source into your project and needs the @insightcharts registry in components.json; see installation. With the package, import it by name:

import { BoxPlot } from "insightcharts";

Examples

Sorted, long labels, many outliers

Delivery time by carrier, 180 parcels each

Days from dispatch to delivery

Illustrative data

Vertical, ordered categories

Daily mean temperature by month

°C, 30 readings per month. July and August are highlighted.

Illustrative data

Single box, min-max whiskers

Swift delivery times, 180 parcels

Days from dispatch to delivery, minimum to maximum

Illustrative data

Props

PropTypeDefaultDescription
valuerequiredstringNumeric field to summarise. Pass raw rows; quartiles are computed in the chart.
groupstringCategory field: one box per distinct value. Omit for a single box.
labelstringField naming each row, shown when hovering an outlier.
orientation"horizontal" | "vertical""horizontal"Horizontal leaves room for long names; vertical suits ordered categories.
whiskers"tukey" | "minmax""tukey"tukey: furthest point within 1.5 × IQR, the rest drawn as outliers. minmax: the extremes.
sort"none" | "asc" | "desc""none"Order boxes by median.
Common chart props 29

Every chart built with defineChart accepts these on top of its own props.

PropTypeDescription
dataDataInputRows, CSV text, a URL, { url, path }, an async function, or an Arrow-style table. Omit inside <InsightData>.
transformTransform | Transform[]A pipeline of transforms applied before drawing.
titlestringThe title. One plain statement of what the data shows, with the number and the period ("Monthly churn fell from 4.2% to 2.1% in 2024"), or a plain label ("Monthly churn, 2024"). One clause, no figures of speech.
subtitlestringMeasure, unit, population, period.
sourcestringData source, shown as "Source: ...".
notestringMethod notes or caveats.
heightnumber | stringCSS height of the plot. Default 360.
aspectnumberWidth / height. Overrides height.
highlightstring | string[]The entity (or entities) the title is about. Every other series is drawn in grey.
annotationsAnnotation[]Reference lines, shaded bands and callouts, in data coordinates.
formatFormatSpecHow to print values: "compact", "percent", "currency:USD", "{value} kg", Intl options, or a function.
legendbooleanShow the legend. Default: shown when there are two or more series.
selectboolean | stringMake marks clickable to filter. Inside <InsightData> the selection filters every other chart. Pass a field name, or true to use the chart's category field.
onSelect(values: string[], field: string) => voidCalled with the selected values whenever the selection changes.
optionEChartsOption | ((option: EChartsOption, ctx: BuildContext) => EChartsOption)Deep-merged over the generated ECharts option, or a function that receives and returns it. Use it for ECharts settings no prop covers.
themeThemeInputA theme, or a partial set of tokens merged over the surrounding theme, for this chart only.
modeModeInput"auto" (default) follows the page, "system" follows the OS, or force "light" / "dark".
rendererRendererInput"auto" (default) uses SVG for light charts and canvas for heavy ones.
animatebooleanSet false to disable animation. Reduced-motion preferences are always respected.
lazybooleanMount the chart only when it scrolls near the viewport. Default true.
groupstringLink tooltips with other charts sharing this group id.
exportableboolean | ExportFormat[]Show an export menu: true or a list of formats from png, jpeg, svg, pdf, csv, json.
tablebooleanShow a collapsible "View data" table under the chart.
altstringAccessible description: the chart type and measures, then the main pattern and the notable values.
idstringStable id for this chart's selection in the shared store.
onEventsRecord<string, ChartEventHandler>ECharts event handlers, e.g. { click: (params, chart) => {} }. Prefix a name with zr: to bind to the canvas itself.
onReady(chart: EChartsInstance) => voidCalled with the ECharts instance once it is created.
classNamestringClass name for the outer <figure>.
styleCSSPropertiesInline style for the outer <figure>.