Box plot chart
The box plot summarizes the statistical distribution of a dataset using the five-number summary: minimum, lower quartile, median, upper quartile, and maximum. It is the preferred chart type for showing spread, skewness, and outliers across categories.
Response times
TIP
This component is best used inside a Chart pane.
Props
series: FluxStatisticsChartBoxPlotSeries[]
The data series. Each point holds `min`, `q1`, `median`, `q3`, and `max` values.
labels?: string[]
X-axis category labels. If omitted, the `label` field on each point is used.
tooltip?: boolean
Show a tooltip on hover. Disabled by default.
x-axis-labels?: boolean
Show labels on the X-axis. Disabled by default.
y-axis-labels?: boolean
Show labels on the Y-axis. Disabled by default.
split-lines?: boolean
Show dashed split lines along value axes. Disabled by default.
advanced-options?: EChartsOption
Escape-hatch for raw ECharts options merged on top of the Flux defaults.
Examples
Basic
A box plot comparing distributions across several categories.
Survey scores
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Survey scores"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
:labels="['Q1', 'Q2', 'Q3', 'Q4']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'Score',
data: [
{ min: 40, q1: 55, median: 64, q3: 72, max: 86 },
{ min: 42, q1: 58, median: 66, q3: 74, max: 88 },
{ min: 48, q1: 60, median: 70, q3: 78, max: 92 },
{ min: 52, q1: 64, median: 74, q3: 82, max: 95 }
]
}];
</script>Multi category
A wider box plot with more categories on the X axis.
Build duration by branch
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Build duration by branch"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
:labels="['main', 'develop', 'feat/a', 'feat/b', 'feat/c', 'release']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'Minutes',
data: [
{ min: 6, q1: 9, median: 11, q3: 14, max: 20 },
{ min: 7, q1: 10, median: 13, q3: 16, max: 24 },
{ min: 5, q1: 8, median: 10, q3: 12, max: 18 },
{ min: 8, q1: 12, median: 15, q3: 18, max: 28 },
{ min: 9, q1: 13, median: 17, q3: 20, max: 30 },
{ min: 10, q1: 14, median: 18, q3: 22, max: 32 }
]
}];
</script>Tight distribution
A box plot showing tightly clustered distributions.
Tight distribution
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Tight distribution"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
:labels="['EU-W1', 'EU-C1', 'US-E1', 'AP-S1']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'Latency',
data: [
{ min: 38, q1: 41, median: 43, q3: 45, max: 50 },
{ min: 40, q1: 42, median: 44, q3: 46, max: 49 },
{ min: 85, q1: 88, median: 90, q3: 93, max: 96 },
{ min: 120, q1: 124, median: 126, q3: 130, max: 134 }
]
}];
</script>Wide spread
A box plot with wide whiskers showing large variance per route.
Page load spread
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Page load spread"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
:labels="['/', '/dashboard', '/search', '/checkout', '/profile']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'ms',
color: 'warning',
data: [
{ min: 120, q1: 220, median: 380, q3: 560, max: 980 },
{ min: 180, q1: 320, median: 540, q3: 880, max: 1640 },
{ min: 90, q1: 160, median: 270, q3: 420, max: 720 },
{ min: 240, q1: 480, median: 820, q3: 1320, max: 2280 },
{ min: 110, q1: 190, median: 310, q3: 480, max: 820 }
]
}];
</script>Single category
A focused single-category box plot.
Single sample
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Single sample"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
:labels="['Latency']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'ms',
color: 'primary',
data: [
{ min: 42, q1: 58, median: 72, q3: 88, max: 124 }
]
}];
</script>With tooltip
Enable the hover tooltip listing min, quartiles, and max.
Response times
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Response times"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
tooltip
:labels="['API', 'DB', 'Cache', 'Worker', 'Search']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'ms',
data: [
{ min: 54, q1: 66, median: 82, q3: 88, max: 120 },
{ min: 22, q1: 30, median: 38, q3: 44, max: 60 },
{ min: 4, q1: 6, median: 8, q3: 12, max: 18 },
{ min: 110, q1: 130, median: 152, q3: 168, max: 210 },
{ min: 38, q1: 52, median: 64, q3: 78, max: 96 }
]
}];
</script>With axis labels
Show X/Y axis labels and dashed split lines.
Response times
<template>
<FluxStatisticsChartPane
icon="chart-bar"
title="Response times"
:aspect-ratio="3">
<FluxStatisticsBoxPlotChart
split-lines
x-axis-labels
y-axis-labels
:labels="['API', 'DB', 'Cache', 'Worker', 'Search']"
:series="series"/>
</FluxStatisticsChartPane>
</template>
<script
setup
lang="ts">
import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
import { FluxStatisticsBoxPlotChart, FluxStatisticsChartPane } from '@flux-ui/statistics';
const series: FluxStatisticsChartBoxPlotSeries[] = [{
name: 'ms',
data: [
{ min: 54, q1: 66, median: 82, q3: 88, max: 120 },
{ min: 22, q1: 30, median: 38, q3: 44, max: 60 },
{ min: 4, q1: 6, median: 8, q3: 12, max: 18 },
{ min: 110, q1: 130, median: 152, q3: 168, max: 210 },
{ min: 38, q1: 52, median: 64, q3: 78, max: 96 }
]
}];
</script>