CandlestickChart

The trading instrument view: OHLC candles colored by direction from the success/destructive tokens, an optional docked volume pane, and optional overlay series (moving averages) in the series tokens. Press or scrub a candle to read its Open/High/Low/Close and volume.
OLY
iOS
OLY
Android
OLY
Web
tsx
<CandlestickChart
title="OLY"
labels={["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10"]}
candles={[
{ open: 64.0, high: 64.3, low: 62.7, close: 63.5 },
{ open: 63.5, high: 64.6, low: 63.2, close: 63.9 },
{ open: 63.9, high: 64.9, low: 62.4, close: 63.6 },
{ open: 63.6, high: 65.2, low: 62.4, close: 64.2 },
{ open: 64.2, high: 64.4, low: 64.0, close: 64.2 },
{ open: 64.2, high: 65.3, low: 62.8, close: 64.4 },
{ open: 64.4, high: 65.4, low: 63.8, close: 64.4 },
{ open: 64.4, high: 64.5, low: 62.6, close: 63.8 },
{ open: 63.8, high: 65.8, low: 63.6, close: 64.7 },
{ open: 64.7, high: 65.1, low: 63.9, close: 64.6 }
]}
volume={[31, 27, 35, 29, 18, 33, 26, 41, 38, 24]}
/>

Props

Prop
Description
labels
required
string[]
Period labels along the x axis, one per candle.
candles
required
Candle[]
One OHLC candle per label.
volume
number[]
Optional volume per candle, drawn as a docked pane under the price plot.
overlays
ChartSeries[]
Optional overlay series (e.g. moving averages), colored by the chart-1..8 tokens (or an overlay's own `success`/`destructive` tone).
title
string
Optional heading shown above the plot.
max
number
Y-axis overrides. Defaults to nice bounds around the lows/highs (not zero-based).
min
number
—
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility (legend lists the overlays when present).
hideGrid
boolean
Furniture visibility (legend lists the overlays when present).
hideAxes
boolean
Furniture visibility (legend lists the overlays when present).
formatValue
(v: number) => string
Formats tick labels and accessible values (data formatting, not styling).
selected
number | null
Scrub-to-inspect: the selected candle index (controlled). Pass null for none.
defaultSelected
number
Scrub-to-inspect: the initially selected candle (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press/scrub selects a candle (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

OHLC data

Don’t
Fill the candles from a close-only series by repeating the close as open, high and low; every candle collapses to a flat tick, and the chart shows less than a line of the closes would.
Do
Feed the candles real open, high, low and close prices; each body shows the session's move and each wick its range.
← BulletChart
Chart →