BoxPlotChart
BoxPlotChart, BoxPlotChartProps, BoxPlotChartSeriesConfig: generated from the source of active-charts.
Exported by @workspace/. Generated from the package source; part of the index of every export.
Box Plot Chart#
Generic over TDatum extends Chart; the props below name it.
Props
- Type
TDatum[]
Flat array of row objects keyed by field name.
- Type
number
Container height in pixels. Width is always responsive.
- Type
Extract<keyof TDatum, string>XKeyFor<TDatum>
- Type
boolean | LegendOptions
Enable legend. Default: false.
- Type
boolean | ZoomOptions
Enable zoom & pan. Default: false.
- Type
AccessibilityOptions
Accessibility configuration — ARIA label/description, screen-reader data table, live-region announcements. Merged with ChartDefaults.
- Type
NoUpdate Animation Option
The entrance animation. No update: the series redraws on new data without a transition (LAB-AT10).
- Type
AnnotationOptions[]
Point annotations: a label with an optional connector and marker at a data coordinate, x on the x axis and y on the first value axis. The contract of <Chart>'s options. (BC1).
- Type
string
Optional className applied to the outer container.
- Type
string[]
Categorical palette for this chart only: replaces the host palette (--chart- … --chart-) in the chart's colour assignment, and nothing else. It is a data encoding, not a theme: surfaces, text, grid and semantic roles keep coming from the CSS token contract, and a series, datum or annotation that sets its own colour keeps it. Any CSS colour string (a public token reference such as var(--chart-, hex, oklch).
- Type
boolean | CrosshairOptions
Enable crosshairs. Default: false for box plots.
- Type
CrossLine Options[]
Cross lines (reference lines/bands).
- Type
readonly ChartItem Ref[]
The initial selection of an uncontrolled chart.
- Type
"ltr""rtl"
The chart's UI direction: the reading direction of its HTML text and chrome (tooltip, legend, menus, the accessible table), and the direction the context menu carries under <body>.
Left out, the chart inherits the direction of the page around it (the nearest dir attribute, else the computed CSS direction) and follows a later change of that attribute. It is never inferred from locale, and it never reverses an axis or reorders data: reversed stays an explicit axis choice. Under rtl the chrome mirrors (legend flow, tooltip side, context menu and submenus, report text in exports), a title-like label starts at the inline start, and a label placed by geometry (an axis tick, a slice or bar label) keeps its physical side; plot arrow keys stay spatial while legend and menu arrows follow the reading direction.
- Type
(ChartEvents & Chart Selection Even…
Every event callback in one prop, selection events included.
- Type
string
Fill color for the IQR box.
- Type
boolean
Horizontal layout (T4): categories on the y axis, values on x; the same statistics, min stays the low value. Default: false.
- Type
ChartLegend Link
Connects the chart's legend to use, for a legend the host renders itself. Give one link to one chart.
- Type
ValuePresentation
Presentation input for axis labels, tooltips, labels and accessibility announcements: a locale code (notation follows the language), or a presentation-context object ({language) carrying language and notation independently. date is the normal human date shape a plain date consumer inherits; an axis that declares its own preset for readability keeps it. Forwarded untouched to the central @workspace/; the package never resolves tenant or application settings itself. When omitted, <Chart supplies it; with neither, the chart throws a configuration error (no 'en' fallback, active-format D14). Object inputs must be referentially stable across renders.
- Type
string
Key for maximum value (whisker high).
- Type
string
Key for median.
- Type
string
Median line color.
- Type
number
Median line width. Default: 2.
- Type
string
Key for minimum value (whisker low).
- Type
string
Series display name.
- Type
number
Outlier dot radius. Default: 3.
- Type
string
Optional key for outlier values (array of numbers per row).
- Type
string
Key for first quartile (Q1).
- Type
string
Key for third quartile (Q3).
- Type
Ref<ChartHandle>
Imperative handle — see Chart. Allows getting a ref to the component instance. Once the component unmounts, React will set ref. to null (or call the ref with null if you passed a callback ref).
- Type
readonly ChartItem Ref[]
The selection, controlled by the host. The chart draws, announces and lists the items it resolves to and never changes it; the host updates it from on. A request the host applies is announced when the host passes it back; one it ignores is never announced. A reference to an item that is hidden, zoomed or drilled out of view, or not in the data stays in the host's selection and is not shown as selected.
- Type
BoxPlot Chart Series Config[]
Several series, side by side in their category in this order; hiding one closes its gap (T4).
- Type
string
Stroke color for box outline and whiskers.
- Type
number
Stroke width. Default: 1.5.
- Type
boolean | ChartSync Options
Synchronize with other charts in a SyncGroup. Default: false.
- Type
ChartTranslate Fn
The host translator for every text the chart shows or announces. When omitted, <Chart supplies it; with neither, the chart throws a configuration error (no English fallback, ADR-028).
- Type
SingleItem Tooltip Option
The tooltip of the addressed item, with every value it has. Mode 'single' only: the item has no single value for a shared or split row (LAB-AT6).
- Type
number
Optional fixed width in pixels. Default: fill container.
- Type
number
The box's width as a share of its category band (the band, not the step; T4-X3). Default: 0.5 for one series; several visible series stand side by side and the ratio sizes their group, default 0.8 (T4).
- Type
"category"NumericXAxis<string> TemporalXAxis<…> (Omit<AxisConfig, "formatter" | "…
- Type
UprightValue Axis Config
Value-axis configuration: the y axis upright, the x axis when horizontal.
Events
Called by the component when something happens.
- Type
(change) => void
Fired once for every legend change the chart applies: a hide, a show, an isolation or a show-all, from the built-in legend (click, key, double click, double tap), its menu, or use. The change names the entry and its target by identity and lists every hidden target after it. A refused action (the last visible target, legend.) changes nothing and reports nothing.
- Type
(selection, change) => void
Fired when the reader changes the selection (pointer, touch or keyboard), and when an uncontrolled selection drops items the data no longer contains. selection is the complete selection the change makes; it keeps every reference the selection held, of whatever form. On a controlled chart it is a proposal (change.), computed from the current selected and never from an earlier proposal; the host applies it, changes it or ignores it.
- Type
function
Fired when the zoom range changes (after animation completes). Fractions [0..1]. Y params are only provided when Y-zoom is active. Cartesian charts only.
- Type
(event) => void
Fired when a chart animation completes.
'load': initial mount animation finished (or immediately if animation disabled / prefers-reduced-motion is active).'update': data-update transition finished.
Not triggered by zoom animations (use on) or tooltip fades.
- Type
(result) => void
Fired after a successful export action (PNG/SVG/CSV/PDF), including from the context menu and from imperative Chart calls.
- Type
(format, error) => void
Fired when an export could not produce its file (W11), from the handle as well as from the context menu. Without it a failed context-menu export is reported as an error diagnostic (<Chart).
- Type
(item, source) => void
Fired when the reader activates an item: a click or tap on it, or Enter on the focused item (Shift+Enter on a sankey, whose Enter moves between nodes and links). With a handler, Enter activates instead of opening the context menu (Shift+F10 and the context-menu key still open it).
- Type
() => void
Fired exactly once per chart instance, after the first successful mount with valid dimensions and before any entrance animation starts. "Ready" means: the SVG is in the DOM, layout has run with real dimensions, and the chart can be queried by integration tests.
Distinct from on with type: 'load', which fires *after* the load animation finishes. A chart with animation={false} still fires on — animation state has no effect on readiness.
A new React key on the host produces a new component instance and on fires again. Identity changes of the callback itself after the first fire are ignored (latch is per-instance).
Consumer requirement — stable from first render. The latch closes on the first effect run regardless of whether on was defined at that moment. If on is initially undefined and later resolves to a function, the callback will never fire — the latch has already closed with a no-op. Pass a stable reference (typically via use) or pass the final function unconditionally from the first render.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Types#
Props for Box. Default xAxis is 'category': box plots are overwhelmingly categorical (per-group distributions). Discriminated union on x, see Cartesian.
The props of Box, each described in its prop list on this page.
type BoxPlotChartProps<TDatum extends ChartDatum = ChartDatum> =
BoxPlotChartBaseProps<TDatum> &
BoxPlotSeriesSource &
BoxPlotOrientationProps &
CartesianXKeyCategoryDefault<TDatum>;One series of a Box with several (series, T4-D12): its five statistics, its outliers, its identity and its colours. The chart-level fields (stroke width, width ratio, median width, outlier radius, orientation) hold for every series. Several visible series stand side by side in their category, in this order (T4).
interface BoxPlotChartSeriesConfig {
id?: string;
minKey: string;
q1Key: string;
medianKey: string;
q3Key: string;
maxKey: string;
outliersKey?: string;
name?: string;
fill?: string;
stroke?: string;
medianStroke?: string;
visible?: boolean;
showInLegend?: boolean;
}