Preview Updated 2026-05-10

BoxPlot

Five-number statistical summary with outliers.

Basic usage

Data is passed in via props and rendered as plain SVG — no third-party charting library. Colors come from the --viz-1..8 tokens and are color-blind friendly.

src/App.vue vue

<CfBoxPlot ... />

src/App.tsx tsx

<CfBoxPlot ... />

API latency distribution

Four APIs with p25 / median / p75 + outliers; vertical lines show the full min-max range.

src/App.vue vue

<CfBoxPlot :data="apis" />

src/App.tsx tsx

<CfBoxPlot data={apis} />

API

Prop	Type	Default	Description
`data`	`BoxStat[]`	`—`	{ label, min, q1, median, q3, max, outliers? }[]