API Reference

Complete reference for all components, props, and types.

KlineChart Component

The main component for rendering candlestick charts.

usage.tsx
<KlineChart
  data={candles}
  width={screenWidth}
  height={450}
  candleWidth={8}
  candleSpacing={3}
  showMA={true}
  maPeriods={[5, 10]}
  showCrosshair={true}
  onCrosshairChange={(candle) => console.log(candle)}
/>

Props

Prop	Type	Default	Required	Description
`data`	`Candle[]`	`—`	Yes	Array of candle data to render
`width`	`number`	`—`	Yes	Chart canvas width in pixels
`height`	`number`	`—`	Yes	Chart canvas height in pixels
`candleWidth`	`number`	`8`	No	Width of each candle body
`candleSpacing`	`number`	`3`	No	Space between candles
`minCandleWidth`	`number`	`2`	No	Minimum candle width when zoomed out
`maxCandleWidth`	`number`	`24`	No	Maximum candle width when zoomed in
`bullishColor`	`string`	`'#2DC08E'`	No	Color for bullish candles (close >= open)
`bearishColor`	`string`	`'#F6465D'`	No	Color for bearish candles (close < open)
`showMA`	`boolean`	`true`	No	Whether to show Moving Average lines
`maPeriods`	`number[]`	`[5, 10]`	No	MA calculation periods
`maColors`	`string[]`	`['#F7931A', '#5B8DEF', '#C084FC']`	No	Colors for each MA line
`showCrosshair`	`boolean`	`true`	No	Enable long-press crosshair
`backgroundColor`	`string`	`'#0B0E11'`	No	Chart background color
`gridColor`	`string`	`'rgba(255,255,255,0.2)'`	No	Grid line color
`textColor`	`string`	`'rgba(255,255,255,0.35)'`	No	Axis label text color
`crosshairColor`	`string`	`'rgba(255,255,255,0.3)'`	No	Crosshair line color
`rightPaddingCandles`	`number`	`20`	No	Right-side padding in candle units
`onCrosshairChange`	`(candle: Candle \| null) => void`	`—`	No	Callback when crosshair activates or deactivates

Exports

Everything exported from the package:

imports.ts
import { KlineChart, computeMA } from 'react-native-kline-chart';
import type { Candle, KlineChartProps } from 'react-native-kline-chart';