Charts

Box Plot

How values spread in each category — quartiles, median, whiskers and outliers, several series side by side. Drawn as SVG by the component, rendered on the server and themed by the design tokens.

Part of @tectra-ng/charts (npm install @tectra-ng/charts, also included in tectra-ng).

Features10

API

Theming

Basic

Give raw values and the chart computes the box (first to third quartile), the median, whiskers to the last values within 1.5 × IQR and the outliers beyond them.

Response time by service. Box plot, 1 series, 5 values
Category	Min	First quartile	Median	Third quartile	Max
Auth	99	111	119	129	139
Search	169	200.75	215.5	228	260
Checkout	266	315.75	338	354.25	400
Profile	81	90.75	94	98	108
Reports	425	503.75	535.5	570.75	635

Grouped

Several series stand side by side in each category; the legend hides one and the others take its place.

Deal size by region. Box plot, 2 series, 4 values
Category	Min	First quartile	Median	Third quartile	Max
Europe, Q1	35.2K	39.5K	43K	43.9K	47.5K
Europe, Q2	40.6K	44K	45.5K	47.8K	52.2K
Europe, Q3	42.4K	48.2K	52.4K	54.3K	57.8K
Europe, Q4	42.3K	46.2K	48K	50K	54.7K
Americas, Q1	31.3K	36K	38.9K	40.5K	45.9K
Americas, Q2	31.7K	38.9K	41K	45.2K	50.6K
Americas, Q3	32K	40.2K	45.2K	48.1K	54.4K
Americas, Q4	42.5K	49.8K	52.2K	56.7K	65K

Stats

When the numbers are already known, pass { min, q1, median, q3, max, outliers }. showOutliers hides the outliers.

Test scores by grade. Box plot, 1 series, 3 values
Category	Min	First quartile	Median	Third quartile	Max
Grade 5	41	58	67	76	94
Grade 6	45	61	70	79	97
Grade 7	38	55	66	81	99

Events

boxClick reports the clicked box with its category and the five numbers.

Click a part. Box plot, 1 series, 3 values
Category	Min	First quartile	Median	Third quartile	Max
A	4	6.75	8.5	11.25	12
B	2	3	4	5.5	7
C	8	11	13	16.5	22

Click the chart.

10 lines

<div class="wrap">  <tx-boxplot-chart    [series]="data"    [categories]="['A', 'B', 'C']"    [height]="280"    ariaLabel="Click a part"    (boxClick)="onClick($event)"  />  <p class="log" aria-live="polite">{{ message() }}</p></div>

Loading and empty

loading keeps the size with a skeleton; empty series show "No data".

No data

13 lines

<div class="wrap">  <div class="controls">    <button txButton label="Load data" variant="outlined" (click)="load()"></button>    <button txButton label="Clear" variant="text" (click)="live.set([])"></button>  </div>  <tx-boxplot-chart    [series]="live()"    [categories]="['A', 'B', 'C']"    [loading]="loading()"    [height]="260"    ariaLabel="Loaded data"  /></div>

Live

New series redraw in place — boxes move to their new quartiles.

Shuffled data. Box plot, 1 series, 3 values
Category	Min	First quartile	Median	Third quartile	Max
A	29	33.75	39.5	45.25	51
B	44	49.75	54.5	60.25	66
C	37	42.75	48.5	53.25	59

11 lines

<div class="wrap">  <div class="controls">    <button txButton label="Shuffle" variant="outlined" (click)="shuffle()"></button>  </div>  <tx-boxplot-chart    [series]="live()"    [categories]="['A', 'B', 'C']"    [height]="300"    ariaLabel="Shuffled data"  /></div>

Accessibility

Tab to the chart: ←/→ walk the categories, ↑/↓ the series, and each box is announced with its five numbers. Screen readers also get a summary and a hidden table.

Lead time by team, days. Box plot, 1 series, 3 values
Category	Min	First quartile	Median	Third quartile	Max
Core	4	5	6	7	8
Web	4	4	4	4	4
Mobile	7	8	9	10	12

Design tokens

dt sets the box width, radius and fill, the line widths, the whisker caps, the outliers and the palette of one chart.

Custom boxes. Box plot, 1 series, 3 values
Category	Min	First quartile	Median	Third quartile	Max
A	41	44	50	54	59
B	53	56.75	59.5	62	69
C	31	41.75	45.5	52	60

9 lines

<tx-boxplot-chart    [series]="series"    [categories]="labels"    [dt]="{      boxplot: { boxWidth: '0.3', fillOpacity: '0.5', medianWidth: '3.5', whiskerWidth: '0' },      series: { color1: 'var(--tx-purple-500)' },    }"    ariaLabel="Custom boxes"  />

Pass through

pt reaches the parts — box, median, whisker, outlier, grid, axis, legend, plot, tooltip and more.

Dashed whiskers. Box plot, 1 series, 2 values
Category	Min	First quartile	Median	Third quartile	Max
North	62	66.75	70.5	76	82
South	46	50.75	55	59.25	65

9 lines

<tx-boxplot-chart    [series]="series"    [categories]="labels"    [pt]="{      whisker: { style: { 'stroke-dasharray': '3 3' } },      median: { style: { stroke: 'var(--tx-text-primary)' } },    }"    ariaLabel="Dashed whiskers"  />

Unstyled

unstyled removes the tectra styles: no tokens, no rounding, no motion — the geometry, the colours, the tooltip and the keyboard stay, ready for your own CSS.