Box Plot for Angular

import { AuiBoxPlot } from '@absoluteui/angular/box-plot';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Box Plot page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { boxPlot: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiBoxPlot } from '@absoluteui/angular/box-plot';
import type { BoxPlotSeries } from '@absoluteui/components/box-plot';

@Component({
  selector: 'app-latency',
  imports: [AuiBoxPlot],
  template: `<aui-box-plot label="Latency by region" [categories]="regions" [series]="series"></aui-box-plot>`,
})
export class LatencyComponent {
  readonly regions = ['EU', 'US'];
  readonly series: BoxPlotSeries[] = [{ id: 'prod', label: 'Prod', data: [[10, 12, 14, 16, 90], [8, 10, 11, 13, 15]] }];
}

<aui-box-plot>

Class AuiBoxPlot; template reference #ref="auiBoxPlot".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby). Must not be blank.
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (series and category counts, per-series lowest and highest median, hidden series).
valueFormat	NumberFormatOptions		Number format for statistics in box names, the tooltip, the data table, the summary, and axis ticks (ticks use fixed fraction digits).
formatValue	(value: number) => string		Custom value text; overrides valueFormat everywhere except axis ticks.
categories	readonly string[]		Required. Category labels, one per box group (text only).
series	readonly BoxPlotSeries[]		Required. Series: { id, label, data: BoxPlotDatum[], color?: 1-8 }, one datum per category. A datum is precomputed statistics { min, q1, median, q3, max, outliers? } (finite, min <= q1 <= median <= q3 <= max; min and max are the whisker ends), raw values number[] (non-finite values ignored), or null (no box).
categoryAxis	{ label?: string; }		Category axis title; also the first data table column header (default “Category”).
valueAxis	ValueAxisInput		Value axis title, fixed domain (max > min; marks are clamped to it), and approximate tick count (2-20). includeZero is validated but has no effect on a box plot; the automatic domain spans every whisker and outlier.
legend	ChartLegendMode	'auto'	auto: legend (toggle buttons) when there is more than one series.
dataTable	ChartTableMode	'toggle'	Data table fallback (one row per category and series: Minimum, Lower quartile, Median, Upper quartile, Maximum, Outliers): behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus (maximum, quartiles, median, minimum, outlier count).
patterns	boolean	false	Texture fills on the boxes (and legend keys) of the second and later series so series never differ by color alone (always on in forced colors).
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container.
whiskers	BoxPlotWhiskers	'tukey'	Whiskers computed from raw values: tukey (whiskers end at the most extreme values within 1.5 IQR of the quartiles; values beyond are outliers) or minmax (whiskers at the minimum and maximum, no outliers). Precomputed statistics are drawn as given.
locale	string	'en-US'	Number, list, and message locale.
direction	Direction	'ltr'	rtl mirrors the category axis and series order, moves the value axis to the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Ids of series hidden initially; update() replaces the hidden set.

Outputs

Output	Payload	Description
(seriesToggled)	ChartSeriesToggleDetail	The user toggled a legend entry (pointer or keyboard). Not emitted for update() or setSeriesVisible(). Re-emits aui-series-toggle.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Show or hide a series programmatically; emits no event.