Stunning KLine Charts for React Native
A high-performance candlestick chart component powered by @shopify/react-native-skia. Smooth gestures, crosshair, MA indicators — all at 60fps.
Why KLine Chart?
Everything you need to build professional financial charts in React Native.
Skia Rendering
Draws directly on a Skia canvas using PictureRecorder for maximum performance — bypasses React reconciliation entirely.
Smooth Gestures
Pan, pinch-to-zoom, and long-press crosshair — all running as Reanimated worklets on the UI thread.
10K+ Candles
Viewport clipping ensures only visible candles are drawn. Handles 10,000+ data points with zero jank.
MA Indicators
Built-in Moving Average lines with configurable periods (MA5, MA10, MA20...) and colors.
Crosshair & Info Panel
Long press to reveal a precision crosshair with OHLC data, price change, and amplitude details.
Fully Customizable
Colors, sizes, spacing, indicators — tweak everything via props. Dark theme ready out of the box.
Up and Running in Minutes
Three simple steps to add professional KLine charts to your app.
Install
Add the package and its peer dependencies.
npm install react-native-kline-chart
# peer dependencies
npm install @shopify/react-native-skia \
react-native-reanimated \
react-native-gesture-handlerImport
Import the component and your candle data.
import { KlineChart } from 'react-native-kline-chart';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import type { Candle } from 'react-native-kline-chart';Render
Drop it into your app — that's it!
export default function App() {
const data: Candle[] = [
{ time: 1700000000000, open: 100, high: 105, low: 98, close: 103 },
{ time: 1700000060000, open: 103, high: 107, low: 101, close: 99 },
// ...more candles
];
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<KlineChart
data={data}
width={400}
height={600}
showMA
showCrosshair
/>
</GestureHandlerRootView>
);
}See It in Action
Real examples of react-native-kline-chart rendering financial data.
Ready to Build?
Add professional candlestick charts to your React Native app today.