Charts - OHLC Examples

OHLC bar chart demos on real data. Each uses `variant="ohlc"` with per-bar color callbacks and event annotations.

#Usage

import { ChartCandlestick, ChartReferenceBand, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';
<ChartSvg>
    <ChartCandlestick variant="ohlc" :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" />
</ChartSvg>

Use variant="ohlc" when the chart needs compact tick bars instead of filled bodies. The same OHLC fields drive both variants.

#WTI Crude Oil (CL1), 2024 Weekly OHLC

variant="ohlc" renders each period as a vertical range line with open and close ticks, no filled body. ChartAnnotation pins four policy decision dates along the X-axis. ChartReferenceBand shades a volatility spike. ChartZoom is enabled for range focusing.

Loading Demo...

#Gold Spot (XAU/USD), 2024 Weekly OHLC

A color callback computes a 20-week SMA and routes each bar to a warm color when close is above it and a cool color when below. A dashed ChartReferenceLine anchors the previous all-time high; ChartReferenceBand shades a consolidation range bounded by both X and Y axes. ChartAnnotation draws a leader line from the breakout candle to a side label. The tooltip shows O / H / L / C, weekly range, and a vs-SMA delta.

Loading Demo...