Basic Usage

Learn how to set up and use the KlineChart component in your app.

Preparing Your Data

KlineChart expects an array of Candle objects. Each candle needs a timestamp and OHLC (Open, High, Low, Close) values:

data.ts
import type { Candle } from 'react-native-kline-chart';

const data: Candle[] = [
  {
    time: 1700000000000,  // millisecond timestamp
    open: 36500.00,
    high: 36800.50,
    low: 36200.00,
    close: 36650.25,
  },
  {
    time: 1700000060000,
    open: 36650.25,
    high: 36900.00,
    low: 36500.00,
    close: 36420.80,
  },
  // ...more candle data
];

Rendering the Chart

Wrap your app in GestureHandlerRootView and pass the data:

ChartScreen.tsx
import { KlineChart } from 'react-native-kline-chart';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useWindowDimensions } from 'react-native';

function ChartScreen() {
  const { width } = useWindowDimensions();

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <KlineChart
        data={data}
        width={width}
        height={450}
      />
    </GestureHandlerRootView>
  );
}

Handling Crosshair Events

Use the onCrosshairChange callback to get data when the user long-presses:

ChartWithInfo.tsx
import React, { useState, useCallback } from 'react';
import { View, Text } from 'react-native';
import { KlineChart } from 'react-native-kline-chart';
import type { Candle } from 'react-native-kline-chart';

function ChartWithInfo() {
  const [activeCandle, setActiveCandle] = useState<Candle | null>(null);

  const handleCrosshairChange = useCallback((candle: Candle | null) => {
    setActiveCandle(candle);
  }, []);

  return (
    <View>
      {activeCandle && (
        <View style={{ flexDirection: 'row', padding: 12, gap: 16 }}>
          <Text>Open: {activeCandle.open}</Text>
          <Text>High: {activeCandle.high}</Text>
          <Text>Low: {activeCandle.low}</Text>
          <Text>Close: {activeCandle.close}</Text>
        </View>
      )}
      <KlineChart
        data={data}
        width={400}
        height={450}
        showCrosshair
        onCrosshairChange={handleCrosshairChange}
      />
    </View>
  );
}