📈 React Native Financial Charts

A high-performance financial charting library for React Native, built on the power of Skia and Reanimated.

Designed to render animations at 60/120 FPS on the UI thread, with absolute touch precision (pixel-perfect) and support for complex gesture interactions.

✨ Highlights

• 🚀 Native Performance: GPU rendering via Skia.
• 👆 Smooth Interaction: Gestures run entirely on the UI Thread (Worklets).
• 🎯 Pixel-Perfect Precision: Hybrid algorithm using Lookup Table + Catmull-Rom ensures the cursor never drifts off the line.
• 🎨 Customizable: Colors, gradients, tooltips, and dimensions are fully adjustable.

📦 Installation

Since this library relies on powerful native modules, you must install the Peer Dependencies:

yarn add react-native-financial-charts

# Install required dependencies
yarn add @shopify/react-native-skia react-native-reanimated react-native-gesture-handler d3

Note for Expo: If you are using Expo Go, ensure that the Skia and Reanimated versions are compatible with your SDK. It's recommended using Development Builds (npx expo run:android) for the best performance.

📊 Components

1. Candlestick Chart

Financial-first OHLC chart with horizontal scrolling, automatic vertical scaling, selection, Y-axis, last price indicator, cursor, and contextual tooltips.

Read the full CandlestickChart Documentation

import { CandlestickChart } from 'react-native-financial-charts';
import type { CandlestickChartDataPoint } from 'react-native-financial-charts';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const data: CandlestickChartDataPoint[] = [
  {
    timestamp: new Date('2026-03-10T10:00:00').getTime(),
    open: 42150,
    high: 42780,
    low: 41890,
    close: 42520,
  },
  {
    timestamp: new Date('2026-03-11T10:00:00').getTime(),
    open: 42520,
    high: 43210,
    low: 42340,
    close: 43080,
  },
];

<GestureHandlerRootView style={{ flex: 1 }}>
  <CandlestickChart.Root data={data} width={360} selectable isScrollable>
    <CandlestickChart.Canvas>
      <CandlestickChart.Grid dashEffect={[4, 4]} />
      <CandlestickChart.Candles />
      <CandlestickChart.LastPrice />
      <CandlestickChart.Cursor />
      <CandlestickChart.Tooltip.OHLC />
      <CandlestickChart.Tooltip.Date />
      <CandlestickChart.YAxis />
    </CandlestickChart.Canvas>
  </CandlestickChart.Root>
</GestureHandlerRootView>;

2. Pie Chart

Interactive Pie/Donut chart with selection, aggregation ("Others"), and high-performance path rendering.

Read the full PieChart Documentation (Includes API Reference, aggregation strategies, start angle/direction, and advanced customization)

import { useMemo, useState } from 'react';
import { Text, View } from 'react-native';
import { PieChart } from 'react-native-financial-charts';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import type { PieChartItem } from 'react-native-financial-charts';

const data: PieChartItem[] = [
  { label: 'Rent', value: 1200, color: '#f87171' },
  { label: 'Food', value: 800, color: '#60a5fa' },
  { label: 'Savings', value: 1500, color: '#34d399' },
  { label: 'Entertainment', value: 500, color: '#fbbf24' },
];

const App = () => {
  const [selectedSlice, setSelectedSlice] = useState<PieChartItem | null>(null);

  const total = useMemo(
    () => data.reduce((sum, item) => sum + item.value, 0),
    []
  );

  const centerLabel = selectedSlice?.label ?? 'Total';
  const centerValue = selectedSlice?.value ?? total;

  return (
    <GestureHandlerRootView
      style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
    >
      <View style={{ width: 300, height: 300 }}>
        <PieChart.Root
          data={data}
          size={300}
          onSelect={(item) => setSelectedSlice(item)}
        >
          <PieChart.Canvas selectable>
            <PieChart.Slices rounded />
          </PieChart.Canvas>
        </PieChart.Root>

        <View
          pointerEvents="none"
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#9CA3AF', fontSize: 14 }}>{centerLabel}</Text>
          <Text style={{ color: '#111827', fontWeight: '700', fontSize: 24 }}>
            ${centerValue.toFixed(0)}
          </Text>
        </View>
      </View>
    </GestureHandlerRootView>
  );
};

3. Line Chart

The classic interactive line chart for financial data.

Read the full LineChart Documentation (Includes API Reference, Areas, Baselines, and Advanced Tooltips)

import { LineChart } from 'react-native-financial-charts';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const data = [
  {
    timestamp: new Date('2025-11-18T10:00:00').getTime(),
    value: 468500.2,
  },
  {
    timestamp: new Date('2025-11-19T10:00:00').getTime(),
    value: 471200.5,
  },
  {
    timestamp: new Date('2025-11-20T10:00:00').getTime(),
    value: 465800.1,
  },
  {
    timestamp: new Date('2025-11-21T10:00:00').getTime(),
    value: 459900.0,
  },
  {
    timestamp: new Date('2025-11-22T10:00:00').getTime(),
    value: 462300.75,
  },
  {
    timestamp: new Date('2025-11-23T10:00:00').getTime(),
    value: 469100.3,
  },
  {
    timestamp: new Date('2025-11-24T10:00:00').getTime(),
    value: 472569.81,
  },
];

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <LineChart.Root data={data} width={400}>
        <LineChart.Canvas>
          <LineChart.Area />
          <LineChart.Baseline />
          <LineChart.Line />
          <LineChart.Cursor />
        </LineChart.Canvas>
        <LineChart.Tooltip.Value />
        <LineChart.Tooltip.Date />
      </LineChart.Root>
    </GestureHandlerRootView>
  );
};

4. Bar Chart

A high-performance bar chart with virtualization, scrolling, and rich interactivity.

Read the full BarChart Documentation (Includes API Reference, Scrolling, Y-Axis customization, and more)

import { BarChart } from 'react-native-financial-charts';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import type { BarChartItemDataInterface } from 'react-native-financial-charts';

const data: BarChartItemDataInterface[] = [
  { label: 'Food 123 ABC', value: 1200, color: '#FF6B6B' }, // Red for expenses
  { label: 'Transport', value: 800, color: '#4ECDC4' }, // Teal
  { label: 'Invest', value: 3500, color: '#1A535C' }, // Dark Blue for savings
  { label: 'Invest', value: 3800, color: '#1A535C' }, // Dark Blue for savings
  { label: 'Rent', value: 2100, color: '#FFE66D' }, // Yellow
];

const App = () => {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BarChart.Root
        data={data}
        width={390}
        selectable
        showXAxis
        scrollToTheEnd
      >
        <BarChart.Canvas>
          <BarChart.Grid />
          <BarChart.Bar />
          <BarChart.Tooltip
            format={(value) => {
              'worklet';
              return value.toString();
            }}
          />
          <BarChart.YAxis labelColor="#FFF" labelBackgroundColor="#696969" />
        </BarChart.Canvas>
      </BarChart.Root>
    </GestureHandlerRootView>
  );
};

🐛 Troubleshooting

Error: missing libsvg.a or skia crash

1. cd android && ./gradlew clean
2. cd .. && rm -rf node_modules && yarn install
3. Ensure @shopify/react-native-skia is compatible with your RN version.

Error: Reanimated failed to create a worklet

Add to babel.config.js:

plugins: ['react-native-reanimated/plugin'],

🤝 Contributing

1. Fork the project
2. Create your Feature Branch (git checkout -b feature/NewFeature)
3. Commit your changes (git commit -m 'Add some NewFeature')
4. Push to the Branch (git push origin feature/NewFeature)
5. Open a Pull Request

This library was inspired by the awesome react-native-wagmi-charts. Ideally, I aimed to create a performant Skia-based alternative with a similar easy-to-use API.

📄 License

Distributed under the MIT License. See LICENSE for more information.