CandlestickChart

Chart
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.
src/charts/candlestick-chart
View in Charts

Playground

Every control sets a real prop of CandlestickChartProps. The JSX below updates as you go.
OLY
Up
Down
Props
compact
boolean
hideGrid
boolean
hideLegend
boolean
JSX · CandlestickChartProps
<CandlestickChart />

Variants

3 examples from src/charts/candlestick-chart/candlestick-chart.md, each rendered live from its own JSX.
Up
Down
Compact sessions
<CandlestickChart
compact
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 }
]}
/>
Up
Down
7-day average
21-day average
Dual moving averages
<CandlestickChart
labels={["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10"]}
candles={[
{ open: 99.0, high: 99.3, low: 97.9, close: 98.5 },
{ open: 98.5, high: 99.6, low: 97.2, close: 98.0 },
{ open: 98.0, high: 99.1, low: 97.7, close: 98.6 },
{ open: 98.6, high: 98.6, low: 98.0, close: 98.4 },
{ open: 98.4, high: 99.6, low: 97.0, close: 98.3 },
{ open: 98.3, high: 99.5, low: 97.1, close: 97.9 },
{ open: 97.9, high: 98.3, low: 97.6, close: 97.8 },
{ open: 97.8, high: 98.8, low: 96.5, close: 98.7 },
{ open: 98.7, high: 99.9, low: 97.7, close: 99.3 },
{ open: 99.3, high: 99.5, low: 98.4, close: 99.1 }
]}
overlays={[
{ label: "7-day average", values: [98.2, 98.3, 98.3, 98.5, 98.5, 98.4, 98.2, 98.2, 98.4, 98.5] },
{ label: "21-day average", values: [97.1, 97.2, 97.2, 97.3, 97.4, 97.4, 97.4, 97.5, 97.7, 97.9] }
]}
/>
Up
Down
Press to inspect
<CandlestickChart
defaultSelected={5}
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 }
]}
/>

Anatomy

OLY
Up
Down
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

19 props on CandlestickChartProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
7 props
labels *
string[]
–
Period labels along the x axis, one per candle.
candles *
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 from chart-2 on (the candles own the status pair and the lead accent), or by an overlay's own success/destructive tone. A dashed overlay draws dashed.
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
–
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
10 props
hideLegend
boolean
false
legendCaption
string
–
A note at the end of the legend's row, pushed to its right edge (what the colours mean, a data source).
hideGrid
boolean
false
hideAxes
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Up
Down
Web
control 10 · field 10 · card 16 · Instrument Sans
Up
Down
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Up
Down
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<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]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--fd
--fm
--ft
--ln
--ok
--sf
--sh-sm
--tx2
--tx3

Related components