Candlestick

Render OHLC candlestick bars with a live in-progress candle.

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.

import { useSharedValue } from "react-native-reanimated";
import { LiveChart, type CandlePoint } from "react-native-livechart";

const candles = useSharedValue<CandlePoint[]>([]);
const liveCandle = useSharedValue<CandlePoint | null>(null);

<LiveChart
  data={data}
  value={value}
  mode="candle"
  candles={candles}
  liveCandle={liveCandle}
  candleWidth={60} // seconds per bucket (1-minute bars)
/>;

The candle shape

Each bar is an OHLC bucket:

interface CandlePoint {
  time: number;  // bucket start, unix seconds
  open: number;
  high: number;
  low: number;
  close: number;
}

• 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).

See the full prop list in the LiveChart reference.