Candlestick

Candlestick charts visualize Open-High-Low-Close (OHLC) data — the canonical shape for stock prices, FX rates, and any time-series with a per-bucket range. Chart.js does not render candlesticks natively.

Note: candlestick is an ApexCharts-specific chart type. Switching charts.library to chartjs throws TypeNotSupportedException with a switch-library hint.

#When to use

When you have a per-period [open, high, low, close] envelope. For single-value time-series reach for line charts — candlestick is overkill if you don't have ranges.

#Basic Example — Daily OHLC

<x-wirekit-chart
    library="apexcharts"
    type="candlestick"
    :labels="[]"
    :datasets="[[
        'label' => 'WIREKIT',
        'data' => [
            ['x' => '2024-12-02', 'y' => [126.40, 130.50, 124.10, 129.80]],
            ['x' => '2024-12-03', 'y' => [129.80, 132.10, 128.20, 131.40]],
            ['x' => '2024-12-04', 'y' => [131.40, 134.80, 130.10, 134.20]],
            ['x' => '2024-12-05', 'y' => [134.20, 135.60, 131.80, 132.50]],
            ['x' => '2024-12-06', 'y' => [132.50, 138.40, 132.20, 137.90]],
            ['x' => '2024-12-07', 'y' => [137.90, 139.60, 136.50, 138.20]],
            ['x' => '2024-12-08', 'y' => [138.20, 139.10, 136.80, 137.90]],
            ['x' => '2024-12-09', 'y' => [137.90, 141.20, 137.30, 140.80]],
        ],
    ]]"
    :options="['xaxis' => ['type' => 'datetime'], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy HH:mm']]]"
    aria-label="Daily OHLC stock prices"
/>

#Combo with overlay — 5-day moving average

<x-wirekit::chart-mixed
    :labels="$dates"
    :datasets="[
        [
            'type' => 'candlestick',
            'name' => 'WIREKIT',
            'data' => $ohlc,
        ],
        [
            'type' => 'line',
            'name' => '5-day MA',
            'data' => $movingAverage,
            'color' => 'var(--color-wk-warning)',
        ],
    ]"
    :options="['xaxis' => ['type' => 'datetime'], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy HH:mm']]]"
/>

<x-wirekit::chart-mixed> accepts the candlestick series and the moving-average line side-by-side; the line overlays directly on top of the candles.

#Real-world recipe — Eloquent OHLC

@php
    $ohlc = \App\Models\StockPrice::query()
        ->where('ticker', 'WIREKIT')
        ->whereBetween('date', [now()->subDays(60), now()])
        ->orderBy('date')
        ->get(['date', 'open', 'high', 'low', 'close'])
        ->map(fn ($r) => [
            'x' => $r->date->toDateString(),
            'y' => [(float) $r->open, (float) $r->high, (float) $r->low, (float) $r->close],
        ])
        ->all();
@endphp

<x-wirekit-chart
    type="candlestick"
    :datasets="[['label' => 'WIREKIT', 'data' => $ohlc]]"
    :options="['xaxis' => ['type' => 'datetime'], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy HH:mm']]]"
/>

#A11y note

Candlestick markers carry no implicit text. Pair every candlestick with a sr-only data table per the canonical a11y recipe (<table class=\"sr-only\"> companion describing each row's [open, high, low, close] tuple).

#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

• Box plot for statistical-distribution visualization (similar visual idiom, different semantics)
• Timeline for multi-event scheduling

#Design Tokens

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