---
title: Candlestick
description: OHLC stock-price visualization with optional moving-average overlay.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-apex/boxplot
  - /components/charts-apex/timeline
---

# 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](./line.md) — candlestick is overkill if you don't have ranges.

## Basic Example — Daily OHLC

:::preview{title="Daily OHLC for a fictional ticker"}
<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

```blade
<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

```blade
@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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Box plot](./boxplot.md) for statistical-distribution visualization (similar visual idiom, different semantics)
- [Timeline](./timeline.md) for multi-event scheduling

## Design Tokens

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