Candlestick

import { CartesianChart, ChartCandlestick, ChartGrid } from "@delacour/react-native-charts";

<CartesianChart data={rows} domainPadding={{ x: 0.5 }} xKey="at" yKeys={["open", "high", "low", "close"]}>
  <ChartGrid color="#E5E5EA" />
  <ChartCandlestick
    candleColors={{ positive: "#30D158", negative: "#FF375F", neutral: "#8E8E93" }}
    keys={{ open: "open", high: "high", low: "low", close: "close" }}
  />
</CartesianChart>;

The four prices are four of the root's yKeys, so the y domain covers every wick, and keys says which is which. candleColors names a colour per Sentiment — a candle that closed above its open is positive, below is negative, level is neutral. Like a bar, a candle is half a step wide and wants domainPadding of half a step.

Six paths, not one per candle: bodies and wicks for each sentiment, and every candle is present in all six, degenerate where its sentiment does not apply. A close that crosses its open therefore morphs from one colour's path into the other rather than vanishing and reappearing.

The scrub needs nothing candle-specific. Name the four keys in useChartScrub, and a ChartCursorLine given axis="y" and yKey="close" rules the close of whichever candle is under the finger.

Sizing

<ChartCandlestick candleColors={colors} candleRatio={0.8} keys={keys} minBodyHeight={2} wickStrokeWidth={1.5} />
<ChartCandlestick candleColors={colors} candleWidth={6} keys={keys} />

candleRatio is the fraction of each step a body fills; candleWidth is an exact width instead. minBodyHeight keeps a flat candle visible — a body thinner than it is expanded to it.

API Reference

ChartCandlestick