Box plot chart
The distribution of each category as its median, quartiles, whiskers and outliers: latency per service, test scores, A/B results.
A box plot summarises a distribution per category: the box runs from the first to the third quartile with a heavier rule at the median, the whiskers reach out to the spread of the samples, and the values past them are drawn as hollow outliers. It suits latency per service, test scores per class and the two arms of an A/B test. It is drawn by ECharts.
Import
import '@c2n/components/chart/boxplot-chart'This chart draws with ECharts 6, a peer dependency it loads on first draw: npm install echarts.
Usage
Data
label-field names the category, and each c2-chart-series field may hold one of three shapes, read row by row:
- A number is one sample. Rows with the same label pool their samples, so long-format data (one row per request) works as it is.
- An array of numbers is the samples of that category.
- A summary object,
{ min, q1, median, q3, max, outliers?, mean?, count? }, is a box already computed by a backend or a query (metrics stores return percentiles, not samples). It is drawn as given.
From samples the quartiles are interpolated linearly, as R (type 7), NumPy and a spreadsheet’s PERCENTILE.INC do. summarizeSamples() is exported from the module for the same figures elsewhere in an app, and the boxes property lists every box the chart drew.
Whiskers, outliers and the mean
whiskers="tukey" (the default) ends each whisker at the furthest sample within 1.5 × IQR of the box; the samples past it are outliers, drawn as hollow points. whiskers="range" runs from the minimum to the maximum, with no outliers. outliers="none" leaves the points out (the tooltip still counts them), and mean="show" adds a diamond at the mean.
Layout
Several series are groups, sitting side by side in each category in the series colours, with the legend: two regions, or control and variant. orientation="horizontal" lays the categories down the left, which suits long names. reference-lines takes a JSON array of { value, label, tone } and draws a dashed rule across the plot at each value, such as an SLO, in the annotation tones (neutral, info, success, warning, danger). value-suffix and precision format the tooltip and the table; the suffix also names the value axis.
The box width, its tint, its outline, the median rule and the outlier size are --c2-chart__box--width (a share of the band, or a length), --c2-chart__box--fill-opacity, --c2-chart__box--border-width, --c2-chart__median--width and --c2-chart__outlier--radius.
Reading it
Hovering a box gives its category a backdrop and lists the five numbers, the outliers (“4, up to 1,320 ms”) and the sample count when it is known; hovering an outlier names its value. With several series a click highlights one and fades the others. The plot is one tab stop: ← and → move between categories and ↑ and ↓ between the series of a category (the other way round when horizontal), and each box is announced with its median, quartiles, whiskers and outliers. For assistive technology the chart also carries every box as a table.