---
title: Box Plot
description: Statistical distribution visualization with min/Q1/median/Q3/max boxes.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/candlestick
---

# Box Plot

Box plots visualize the distribution of a numeric variable across categories — each box shows min / Q1 / median / Q3 / max. Common use cases: response-time distribution per endpoint, salary range per role, exam-score distribution per cohort.

> Note: `boxplot` is an ApexCharts-specific chart type. Chart.js does not have a native equivalent.

## Basic Example — Response time distribution per endpoint

:::preview{title="API response-time distribution (ms) by endpoint"}
<x-wirekit-chart
    library="apexcharts"
    type="boxplot"
    :labels="[]"
    :datasets="[[
        'label' => 'Response time (ms)',
        'data' => [
            ['x' => 'GET /users',    'y' => [12, 28, 45, 78, 145]],
            ['x' => 'GET /orders',   'y' => [22, 48, 78, 124, 280]],
            ['x' => 'POST /orders',  'y' => [45, 89, 132, 198, 420]],
            ['x' => 'POST /payments','y' => [78, 145, 220, 340, 680]],
        ],
    ]]"
    aria-label="Response time distribution per endpoint"
/>
:::

The five-tuple `[min, Q1, median, Q3, max]` defines each box; the median is rendered as the horizontal line inside the box, Q1/Q3 as the box edges, min/max as the whisker tips.

## Salary-band example

```blade
<x-wirekit-chart
    type="boxplot"
    :labels="[]"
    :datasets="[[
        'label' => 'Salary range (€K)',
        'data' => [
            ['x' => 'Junior',   'y' => [38, 42, 48, 55, 65]],
            ['x' => 'Mid',      'y' => [55, 65, 75, 85, 105]],
            ['x' => 'Senior',   'y' => [78, 92, 108, 128, 165]],
            ['x' => 'Staff',    'y' => [115, 138, 162, 192, 240]],
        ],
    ]]"
    height="320px"
/>
```

## License note

ApexCharts is non-MIT — see [the License section on the Chart overview page](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Candlestick](./candlestick.md) — same visual idiom, different semantics (OHLC vs distribution)
- [Bar charts](./bar.md) for single-value comparisons

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.