Data display
BoxPlot
Shows precomputed quartiles, whiskers and outliers.
← All chart guides · Framework setup · Native counterparts
01
See it and copy it
Framework example
Explore the live chart, then open its code for Astro, React, or Elements.
Response-time distribution
Precomputed statistics · milliseconds
Search. Lower whisker: 40 ms. First quartile: 58 ms. Median: 72 ms. Third quartile: 92 ms. Upper whisker: 115 ms. Outliers: 140 ms. Checkout. Lower whisker: 65 ms. First quartile: 80 ms. Median: 105 ms. Third quartile: 130 ms. Upper whisker: 160 ms. Outliers: 190 ms.
- SearchMedian: 72 ms
- CheckoutMedian: 105 ms
View chart data
| Category | Lower whisker | First quartile | Median | Third quartile | Upper whisker | Outliers |
|---|---|---|---|---|---|---|
| Search | 40 ms | 58 ms | 72 ms | 92 ms | 115 ms | 140 ms |
| Checkout | 65 ms | 80 ms | 105 ms | 130 ms | 160 ms | 190 ms |
View BoxPlot code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { BoxPlot } from '@santi020k/lumen-astro'
const data = [
{ id: 'search', label: 'Search', min: 40, q1: 58, median: 72, q3: 92, max: 115, outliers: [140] },
{ id: 'checkout', label: 'Checkout', min: 65, q1: 80, median: 105, q3: 130, max: 160, outliers: [190] }
]
---
<BoxPlot
aria-label="Response-time distribution"
heading="Response-time distribution"
description="Precomputed statistics · milliseconds"
data={data}
domain={{ min: 0, max: 200 }}
formatValue={value => `${value} ms`}
/>import { BoxPlot } from '@santi020k/lumen-react'
const data = [
{ id: 'search', label: 'Search', min: 40, q1: 58, median: 72, q3: 92, max: 115, outliers: [140] },
{ id: 'checkout', label: 'Checkout', min: 65, q1: 80, median: 105, q3: 130, max: 160, outliers: [190] }
]
export const Example = () => (
<>
<BoxPlot
aria-label="Response-time distribution"
heading="Response-time distribution"
description="Precomputed statistics · milliseconds"
data={data}
domain={{ min: 0, max: 200 }}
formatValue={value => `${value} ms`}
/>
</>
)<lumen-box-plot
id="example-box-plot"
aria-label="Response-time distribution"
heading="Response-time distribution"
description="Precomputed statistics · milliseconds"
domain-min="0" domain-max="200"
></lumen-box-plot>
<!-- In a module processed by your bundler, after the chart markup. -->
<script type="module">
import { defineLumenElements, LumenBoxPlotElement } from '@santi020k/lumen-elements'
defineLumenElements(['BoxPlot'])
const chart = document.getElementById('example-box-plot')
if (chart instanceof LumenBoxPlotElement) {
chart.data = [
{ id: 'search', label: 'Search', min: 40, q1: 58, median: 72, q3: 92, max: 115, outliers: [140] },
{ id: 'checkout', label: 'Checkout', min: 65, q1: 80, median: 105, q3: 130, max: 160, outliers: [190] }
]
chart.valueFormatter = value => String(value) + ' ms'
}
</script>When to use BoxPlot
Use to compare the spread and center of several populations when the underlying summary statistics are already available.
- The box spans q1 through q3, the middle marker is the median, and the whiskers end at min/max. Separate dots show supplied outliers.
- State the quartile and whisker convention in a caption. Use statisticLabels and formatValue to name and format exact values for your audience.
Prepare the data
import type { LumenBoxPlotDatum } from '@santi020k/lumen-core'
const data = [{
id: 'search',
label: 'Search',
min: 40,
q1: 58,
median: 72,
q3: 92,
max: 115,
outliers: [140]
}] satisfies readonly LumenBoxPlotDatum[]- Compute the statistics in your application. Each uniquely identified row must satisfy min ≤ q1 ≤ median ≤ q3 ≤ max with finite numbers.
- min and max are the supplied whisker bounds. Lumen does not calculate quartiles, choose a whisker rule, or detect outliers.
- Use all five statistics as null for a missing summary, with no outliers. Partial-null summaries are invalid. A supplied domain must enclose every statistic and outlier.
Avoid misleading comparisons
- Do not label whisker bounds as the absolute minimum and maximum when your statistical method excludes outliers.
- A box plot does not reveal sample size or multiple peaks. Add that context or use a Histogram when distribution shape matters.
02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add BoxPlotlumen add BoxPlotpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add BoxPlot --target reactlumen add BoxPlot --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add BoxPlot --target elementslumen add BoxPlot --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| data | readonly LumenBoxPlotDatum[] | required | Precomputed min, q1, median, q3, max and optional outliers. All five null represents a missing summary. |
| domain | LumenChartDomain | automatic | Includes all whiskers, quartiles and outliers. Invalid or unordered summaries fail closed. |
| formatValue, statisticLabels, labels | Formatter and localized labels | English | Names and formats every statistic in visible and accessible content. |
| showTable | boolean | true | Retains exact statistics and outliers in a keyboard-accessible data disclosure. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |