Overview
BoxPlot (box-and-whisker plot) displays statistical distribution using quartiles, whiskers, and outliers. Perfect for comparing distributions across groups, identifying outliers, and showing statistical spread. Custom SVG implementation for full control.
Features
- Quartile visualization (Q1, median, Q3)
- Min/max whiskers
- Optional outlier display
- Optional mean marker (diamond)
- Vertical and horizontal orientations
- Interactive tooltips with full statistics
Examples
Basic Box Plot
Basic quartile comparison
Group A
Group B
Group C
With Outliers and Mean
Showing outliers and mean
Test 1
Test 2
Survey Score Comparison
Survey score distributions
Usability
Performance
Design
Support
Horizontal Box Plot
Horizontal orientation
Group A
Group B
Group C
With ChartCard
Wrapped in ChartCard
Test Score Distribution
Comparing test performance across groups
Test 1
Test 2
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | BoxPlotData[] | required | Array with label, min, q1, median, q3, max, optional mean/outliers |
orientation | "vertical" | "horizontal" | "vertical" | Chart orientation |
showOutliers | boolean | true | Show outlier points |
showMean | boolean | false | Show mean marker (diamond) |
Usage
import { BoxPlot, ChartCard } from '@/ui/components/charts';
// Basic box plot
<ChartCard title="Score Distribution">
<BoxPlot
data={[
{ label: 'Group A', min: 10, q1: 25, median: 50, q3: 75, max: 90 },
{ label: 'Group B', min: 20, q1: 35, median: 55, q3: 70, max: 85 },
]}
/>
</ChartCard>
// With outliers and mean
<BoxPlot
data={[
{ label: 'Scores', min: 10, q1: 25, median: 50, q3: 75, max: 90, mean: 52, outliers: [5, 95, 98] },
]}
showOutliers
showMean
/>
// Horizontal orientation
<BoxPlot data={[...]} orientation="horizontal" />