Charts - Hollow Candles Examples

Hollow-body candlestick demos on real data. Covers momentum-based coloring, earnings event annotations, and EMA slope callbacks.

#Usage

import { ChartCandlestick, ChartReferenceLine, ChartSvg, ChartTooltip, ChartXAxis, ChartYAxis, ChartZoom } from '@primeui/vue-chart';
<ChartSvg>
    <ChartCandlestick variant="hollow" :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 hollow candles when open/close direction needs more visual separation than color alone. Keep tooltips explicit because hollow candle rules are less universal than standard filled bodies.

#Tesla, Inc. (TSLA), 2024 Weekly Hollow Candles

variant="hollow" renders up-close weeks as outline bodies and down-close weeks as filled bodies. ChartAnnotation pins four quarterly earnings events, each colored by beat/miss magnitude. The custom tooltip reveals an EPS actual vs consensus section when hovering an earnings week. ChartReferenceLine marks the 52-week VWAP. ChartZoom is enabled for drilling into each quarter.

Loading Demo...

#EUR/USD, H2 2024 Daily Hollow Candles

A color callback computes an EMA20 slope and assigns each bar an aqua or semantic negative tint depending on momentum direction. ChartReferenceBand shades a specific time and price window using both X and Y bounds. The tooltip reports the pip change and range alongside the current EMA20 trend label.

Loading Demo...