Charts - Live Candles Examples

Live streaming candlestick demos. Each aggregates ticks into a rolling window with reactive overlays and live annotations.

#Usage

import { ChartAnnotation, ChartCanvas, ChartCandlestick, ChartReferenceLine, ChartTooltip, ChartXAxis, ChartYAxis } from '@primeui/vue-chart';
<ChartCanvas :animation="{ updateMode: 'append', limit: 1000 }">
    <ChartCandlestick :data="candles" category-x-field="time" open-field="open" high-field="high" low-field="low" close-field="close" />
    <ChartXAxis type="time" />
    <ChartYAxis />
    <ChartTooltip crosshair />
    <ChartReferenceLine :y="lastPrice" />
</ChartCanvas>

Use Canvas for live candles so each tick updates the visible window without creating a growing SVG tree. Keep the rolling window bounded and derive candles before they reach the chart.

#BTC/USD, High-Frequency Stream

New candles aggregate every 5 seconds into a 48-candle rolling window. ChartAnnotation layers a last-price tag pinned to the current close and a surface-aware session high/low readout. ChartReferenceLine tracks a live-recomputed VWAP across the visible window.

Loading Demo...

#EUR/USD, Live Tick Stream

A new 1-second candle appends on every tick into a 60-candle rolling window. ChartAnnotation paints a live badge and a bid/ask/spread readout that both update each tick without re-rendering the chart. A dashed ChartReferenceLine tracks the current close reactively across the whole chart.

Loading Demo...