Candlestick
Finance candles with volume, scrub header and price tag.
<CandlestickChart />1 variant
Live — the real React Native component rendered with react-native-web. Tap, drag and scrub it.
Installation
terminal
npx expo install expo-charts react-native-svgUsage
Import the component and pass your data. Width defaults to the parent, so it adapts to phones, tablets and rotation.
CandlestickChart.tsx
<CandlestickChart data={candles} showVolume formatValue={(v) => `$${v.toFixed(1)}`}/>Props
| Prop | Type | Default |
|---|---|---|
| data Candles. | { open, high, low, close, volume?, label? }[] | — |
| upColor / downColor Colours. | string | green / red |
| showVolume / showHeader Extras. | boolean | true / true |
Did you like the content?