Candlestick

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)
/>;

interface CandlePoint {
  time: number;  // bucket start, unix seconds
  open: number;
  high: number;
  low: number;
  close: number;
  volume?: number; // optional — drives the volume bars (see below)
}

<LiveChart
  mode="candle"
  candles={candles}
  liveCandle={liveCandle}
  candleWidth={60}
  metrics={{ candle: { bodyRadius: 3, wickWidth: 2 } }}
/>

const candles = useSharedValue<CandlePoint[]>([
  { time: 1700000000, open: 48, high: 52, low: 47, close: 50, volume: 1200 },
  // …
]);

<LiveChart
  mode="candle"
  candles={candles}
  liveCandle={liveCandle}
  candleWidth={60}
  volume // `true` = defaults, or pass a VolumeConfig
/>;

<LiveChart
  mode="candle"
  candles={candles}
  liveCandle={liveCandle}
  candleWidth={60}
  volume={{
    maxHeight: 64,        // reserved band height (px) = the tallest bar; default 48
    radius: 2,            // bar-top corner radius; default 2
    opacity: 0.6,         // opacity of the whole band; default 0.6
    upColor: "#16a34a",   // default: palette.candleUp
    downColor: "#dc2626", // default: palette.candleDown
  }}
/>;