Skip to main content
Set mode="candle" and supply committed OHLC bars plus an optional in-progress candle. Both must be SharedValues so the chart can read them on the UI thread.
Live example: app/demo/candlestick.tsx in the example app.

Candlestick mode with a live, forming candle

​
The candle shape

Each bar is an OHLC bucket:
  • candles — committed bars, sorted by time.
  • liveCandle — the in-progress bucket, updated each tick. Set it to null between buckets.
  • candleWidth — bucket size in seconds; drives bar width and spacing.
data / value are still used for the line/candle morph and momentum detection, so keep feeding them alongside your candles.

​
Coloring

Bullish/bearish body and wick colors come from the palette derived from accentColor + theme. Override them precisely via the palette prop (candleUp, candleDown, wickUp, wickDown).

​
Body size, spacing & wick shape

Candlestick geometry lives in the metrics.candle sizing tokens. Body width is the smallest of bodyWidthRatio × slot width, slot width - minGapPx, and maxBodyPx, with a 1px floor. minGapPx defaults to 2, preserving a visible gap between adjacent bodies. On dense charts, set it to 0 to let bodyWidthRatio keep bodies proportional instead of collapsing them to the 1px floor:
The 1px body floor takes precedence when a slot is too narrow to preserve the configured gap. Volume bars automatically use the same body width and spacing. bodyRadius defaults to 0 (sharp corners), and wickWidth defaults to 1. See CandleMetrics for every sizing token and default.

​
Volume bars

Pass volume to draw volume bars in a reserved band below the candles. The candle/price plot shrinks by the band height to make room (candles are never cut off) and the x-axis stays pinned to the bottom. Each bar reads its candle’s volume; bar heights are normalized to the largest visible volume, so the tallest visible bar fills the band. Candles without a volume draw no bar.
Configure colors, band height, rounding, and opacity with a VolumeConfig:
Volume is candle mode only. Bars align under the candle bodies (same width + center), colored by candle direction (up/down) unless you override upColor / downColor.

​
Historical reference series

Overlay a changing average cost, VWAP, peg, or other historical benchmark with the referenceLines.series form. It draws a Skia polyline over the candles using the same time and Y scales, supports the normal reference-line color, dash, width, and label fields, and extends its last value flat to the live edge by default.

​
Scrubbing & the OHLC tooltip

Pass scrub to enable the crosshair: the built-in tooltip shows the scrubbed candle’s O/H/L/C stacked with its time. For full control — a minimal pill, your own layout, or to mirror the active candle elsewhere in your UI — pass renderTooltip, which receives the scrubbed bucket as ctx.candle. The JS-thread onScrub callback also includes point.candle for the OHLC under the crosshair. Set scrub.snapToCandles to make the crosshair jump from candle center to candle center instead of gliding. See the full prop list in the LiveChart reference. For intervals without OHLC—no trades, exchange maintenance, or incomplete feed coverage—use candleGaps instead of fabricating normal bullish/bearish candles.