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

<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

<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 and apexcharts.com/license for the full terms.

See Also

• Candlestick — same visual idiom, different semantics (OHLC vs distribution)
• Bar charts for single-value comparisons

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.