Charts - Candlestick & OHLC

#Usage

import {
    ChartAnnotation,
    ChartCandlestick,
    ChartCanvas,
    ChartCaption,
    ChartExportMenu,
    ChartHover,
    ChartItem,
    ChartNavigator,
    ChartReferenceBand,
    ChartReferenceLine,
    ChartSvg,
    ChartTitle,
    ChartTooltip,
    ChartXAxis,
    ChartYAxis,
    ChartZoom
} from '@primeui/vue-chart';

<ChartSvg>
    <ChartCandlestick :data="data" category-x-field="date" open-field="openField" high-field="highField" low-field="lowField" close-field="closeField" />
    <ChartXAxis />
    <ChartYAxis />
</ChartSvg>

Candlestick and OHLC charts visualize price movement over time. Each mark encodes open, high, low, and close for a time period. Positive marks rise (close > open), negative marks fall. Set variant to "ohlc" for tick-based bars or "hollow" for hollow candlestick bodies.

#Basic

Map data fields with categoryXField, openField, highField, lowField, and closeField. Positive candles rise (close > open), negative candles fall (close < open).

#OHLC Bars

Set variant="ohlc" to render tick-based bars instead of filled bodies. Each bar shows a vertical line spanning the high-low range with a left tick for the open price and a right tick for the close price. This is a compact representation common in financial charting.

#Hollow

Set variant="hollow" for a style where bullish candles render as stroke-only outlines while bearish candles remain solid. In hollow mode, color is determined by close relative to the previous candle's close rather than the candle's own open. Positive color means price closed higher than the last close; negative color means lower.

#Colors

Set upColor, downColor, and neutralColor to customize candle colors. upColor applies when price rose, downColor when it fell, and neutralColor for doji candles where open equals close. This sample uses a teal and periwinkle pair to show that direction colors can follow a product palette instead of the usual market convention.

#Candle Styling

Set barWidthRatio to control how much of the available category space each candle body fills. 0.7 uses 70% of the space, leaving gaps between candles. Set wickStrokeWidth to adjust the wick line thickness in pixels.

#Declarative

Define candles inline using ChartItem instead of a data array. Each ChartItem accepts open, high, low, close, and category-x for the time period.

#Title & Caption

Add ChartTitle to display a title above the chart and ChartCaption for a descriptive line beneath it. Both reduce the chart area height together.

For full configuration see Title & Caption.

#Hover

Add ChartHover to brighten the hovered candle while non-hovered candles stay at normal opacity. Set dimOpacity below 1 when you want the rest to fade.

For full configuration see Hover.

#Tooltip

Add ChartTooltip to show OHLC details on hover. The tooltip renders open, high, low, and close values in a structured layout with no extra configuration. Use the render prop for custom tooltip content.

For full configuration see Tooltip.

#Axes

Set type="time" on ChartXAxis for continuous date and timestamp data. Tick labels format based on the visible range from minutes up to years. Use type="logarithmic" on ChartYAxis for long-term price data that spans multiple orders of magnitude.

For full configuration see Axes.

#Data Labels

Add ChartDataLabels to print a value above each candle. By default the label shows the close. Set formatter to build custom text; the callback receives the close, the percentage, the category, and the row datum, so a field such as the high or low can drive the label. Set display to value, percentage, or both, though percentage is rarely meaningful for prices. Labels sit clear of the high wick and auto-hide on candles too narrow to fit the text.

For full configuration see Data Labels.

#Zoom & Navigator

Add ChartZoom to enable drag-to-zoom on the time axis and ChartNavigator to show a mini overview chart below. The navigator uses the close price for its mini chart.

For full configuration see Zoom & Pan and Navigator.

#Annotation

Use ChartAnnotation to render custom content overlaid on the chart area. The render callback receives chartArea, center, xScale, yScale, textColor, isDark, and ctx (Canvas mode only). Use xScale to position event markers at specific dates, such as earnings releases, splits, and news events. On multi-axis charts use getScale('y2') to position against a secondary axis by its ID. In SVG mode return a VNode. In Canvas mode draw to ctx and return null.

For full configuration see Annotation.

#Reference Lines & Bands

Add ChartReferenceLine to mark price levels such as support, resistance, and moving averages. Add ChartReferenceBand to highlight consolidation zones and trading ranges. Set y for horizontal price levels, x for vertical time markers.

For full configuration see Reference Lines & Bands.

#Animation

Pass the chart-root animation prop (<ChartSvg> / <ChartCanvas>) to control entrance and update transitions. Candles grow from zero height on entrance.

For full configuration see Animation.

#Export

Add ChartExportMenu to let users download the chart as PNG, SVG, or PDF.

See Export for format options and programmatic export.

#Responsive

See Responsive for container sizing, aspect ratio, and breakpoint configuration.

#Accessibility

See Accessibility for ARIA labels, keyboard navigation, and screen reader support.

#API

#ChartCandlestick

Visual styling props with type accessor → R accept a static value, a per-candle array, a field name (keyof T), or a callback (ctx: ItemContext<T>) => R | undefined. Color-family arrays cycle modulo length; other accessor arrays clip and fall back to the series default.

#ItemContext

Passed to every accessor → R callback. Return undefined to fall back to the series-level default for that candle.

#Variant Behavior

Per-candle color overrides the direction color for that specific candle across all variants.

#ChartItem

Use ChartItem as children of ChartCandlestick instead of a data array for inline candle definitions.

#Related Docs

• OHLC Examples
• Hollow Examples
• Live Data Examples
• Tooltip
• Hover
• Zoom & Pan
• Navigator
• Annotation
• Reference Lines & Bands
• Animation
• Axes
• Data Labels