Charts - Candlestick Examples
Filled-body candlestick demos on real data. Covers log scale, zoom with navigator, and event annotations.
#Usage
import { ChartCandlestick, ChartNavigator, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';<ChartSvg>
<ChartCandlestick :data="prices" category-x-field="date" open-field="open" high-field="high" low-field="low" close-field="close" />
<ChartXAxis type="time" />
<ChartYAxis />
<ChartTooltip crosshair />
<ChartZoom mode="x" />
<ChartNavigator />
</ChartSvg>Use filled candlesticks for OHLC price movement when body direction matters. Add navigator and zoom when the series spans more than a small trading window.
#Bitcoin (BTC/USD), Weekly, Nov 2021 to Dec 2024
type="logarithmic" on ChartYAxis keeps multi-cycle price ranges readable without compressing the earlier data. ChartReferenceBand shades a bear market window; three ChartAnnotation pins mark major market events, each colored by category. The tooltip shows weekly OHLC plus the week's dollar and percent change, with numbers formatted using toLocaleString.
#Apple Inc. (AAPL), 2024 Daily OHLC
ChartZoom with ChartNavigator gives a minimap for fast range selection across a full trading year. ChartAnnotation pins quarterly earnings dates using the xScale callback so labels stay attached to their candles through every zoom state. A dashed ChartReferenceLine marks the 200-day moving average. The custom tooltip shows O / H / L / C rows, a signed change row, and an intraday range row.
#AAPL, Q1 2024 with Volume sub-pane
Dual y-axes pair price candles on the right with volume bars on the left. :max="180" clamps the bar tops so volume never competes with the wicks. A ChartReferenceLine on the price axis marks the quarter's average close. The shared crosshair tooltip carries the hover position across both panes. For multi-pane combinations see the Combo gallery.