> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 `SharedValue`s so the chart can read them on the UI thread.

<Note>
  **Live example:**
  [`app/demo/candlestick.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/candlestick.tsx)
  in the example app.
</Note>

<Frame caption="Candlestick mode with a live, forming candle">
  <video autoPlay loop muted playsInline controls poster="/media/candlestick.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/candlestick.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=099960415b2025eae4a672ae75b262e6" data-path="media/candlestick.mp4" />
</Frame>

```tsx theme={null}
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:

```ts theme={null}
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)
}
```

* **`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.

<Note>
  `data` / `value` are still used for the line/candle morph and momentum detection, so keep
  feeding them alongside your candles.
</Note>

## Coloring

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

## Body & wick shape

The candle body radius and wick thickness live in the `metrics.candle`
[sizing tokens](/api-reference/types#metrics). Round the body corners with `bodyRadius`
(clamped to half the body so thin candles stay sane) and set the wick stroke with `wickWidth`:

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

`bodyRadius` defaults to `0` (sharp corners); `wickWidth` defaults to `1`. Width/spacing tokens
(`bodyWidthRatio`, `maxBodyPx`, `minBodyPx`) live in the same namespace — see
[`CandleMetrics`](/api-reference/types#metrics).

## 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.

```tsx theme={null}
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
/>;
```

Configure colors, band height, rounding, and opacity with a
[`VolumeConfig`](/api-reference/types#config-objects):

```tsx theme={null}
<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
  }}
/>;
```

<Note>
  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`.
</Note>

## 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`](/guides/scrubbing#custom-tooltip-in-candle-mode),
which receives the scrubbed bucket as `ctx.candle`. The JS-thread [`onScrub`](/guides/scrubbing)
callback also includes `point.candle` for the OHLC under the crosshair.

See the full prop list in the [`LiveChart` reference](/api-reference/livechart).