react-native-stock-graphs

A high-performance, feature-rich stock chart library for React Native applications. Perfect for trading apps, fintech applications, and portfolio trackers.

✨ Features

📊 Chart Types

• Line Chart - Simple price movements
• Area Chart - Filled area under the line
• Candlestick Chart - OHLC data with traditional candlesticks
• OHLC Chart - Open-High-Low-Close bar charts

📈 Technical Indicators

• Simple Moving Average (SMA)
• Exponential Moving Average (EMA)
• Bollinger Bands
• Volume Bars
• RSI, MACD, VWAP, ATR (via utility functions)

🎯 Interactive Features

• Pinch-to-zoom - Smooth zooming with gesture support
• Horizontal panning - Navigate through time periods
• Double-tap reset - Quick return to default view
• Crosshair - Shows precise price/time at touch point
• Tooltip - Displays OHLCV data for hovered candle/point

⚡ Real-time & Streaming

• Incremental data updates - Append/update data efficiently
• WebSocket support - Connect to live data streams
• Server-Sent Events (SSE) - Alternative streaming method
• Smooth animations - Animated transitions for new data

🚀 Performance

• Dual rendering backends - SVG and Skia (high-performance)
• Data virtualization - Handle large datasets efficiently
• Gesture throttling - Smooth interactions
• Tree-shaking friendly - Minimal bundle impact

🎨 Theming & Styling

• Customizable colors - Full theme control
• Dark/Light themes - Built-in theme presets
• Grid customization - Configurable grid lines and labels
• Font customization - Custom fonts and sizes

♿ Accessibility

• Screen reader support - Accessible labels and descriptions
• Keyboard navigation - Where applicable

📦 Installation

npm install react-native-stock-graphs
# or
yarn add react-native-stock-graphs

Peer Dependencies

# Required
npm install react react-native react-native-svg

# Optional (for Skia backend)
npm install @shopify/react-native-skia

Platform Setup

iOS

No additional setup required for SVG backend.

For Skia backend, follow @shopify/react-native-skia installation guide.

Android

No additional setup required for SVG backend.

For Skia backend, follow @shopify/react-native-skia installation guide.

🚀 Quick Start

import React from 'react';
import { View } from 'react-native';
import StockGraph from 'react-native-stock-graphs';

const data = [
  { time: 1640995200000, open: 100, high: 105, low: 95, close: 102, volume: 1000 },
  { time: 1641081600000, open: 102, high: 108, low: 100, close: 106, volume: 1200 },
  // ... more data
];

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <StockGraph
        type="candlestick"
        data={data}
        style={{ height: 320 }}
      />
    </View>
  );
};

export default App;

📖 API Reference

StockGraph Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | type | 'line' \| 'area' \| 'candlestick' \| 'ohlc' | 'line' | Chart type to render | | data | CandleData[] \| LineData[] | [] | Chart data array | | indicators | IndicatorConfig[] | [] | Technical indicators to display | | renderBackend | 'svg' \| 'skia' | 'svg' | Rendering backend | | theme | ChartTheme | DEFAULT_THEME | Color theme | | realtime | RealtimeConfig | undefined | Real-time data configuration | | initialRange | DateRange | undefined | Initial time range to display | | onPressCandle | (candle, index) => void | undefined | Callback for candle press | | style | ViewStyle | {} | Container style |

Data Types

interface CandleData {
  time: number;        // Unix timestamp in milliseconds
  open: number;        // Opening price
  high: number;        // Highest price
  low: number;         // Lowest price
  close: number;       // Closing price
  volume?: number;     // Trading volume (optional)
}

interface LineData {
  time: number;        // Unix timestamp in milliseconds
  value: number;       // Price/value
}

Indicator Configuration

interface IndicatorConfig {
  type: 'sma' | 'ema' | 'bollinger' | 'volume';
  period?: number;     // Period for calculation (default: 20)
  color?: string;      // Custom color
  visible?: boolean;   // Show/hide indicator (default: true)
}

🎯 Examples

Line Chart

const lineData = [
  { time: 1640995200000, value: 102 },
  { time: 1641081600000, value: 106 },
  { time: 1641168000000, value: 108 },
];

<StockGraph
  type="line"
  data={lineData}
  theme={{
    lineColor: '#2196f3',
    background: '#ffffff'
  }}
  style={{ height: 300 }}
/>

Candlestick with Indicators

<StockGraph
  type="candlestick"
  data={candleData}
  indicators={[
    { type: 'sma', period: 20, color: '#ff9800' },
    { type: 'ema', period: 50, color: '#9c27b0' },
    { type: 'volume', color: '#607d8b' }
  ]}
  onPressCandle={(candle, index) => {
    console.log('Pressed candle:', candle);
  }}
  style={{ height: 400 }}
/>

Real-time Updates

import { useRealtimeFeed } from 'react-native-stock-graphs';

const RealtimeChart = () => {
  const { data, updateData } = useRealtimeFeed({
    initialData: candleData,
    bufferSize: 1000
  });

  // Connect to WebSocket or other data source
  useEffect(() => {
    const ws = new WebSocket('wss://api.example.com/stream');
    ws.onmessage = (event) => {
      const newCandle = JSON.parse(event.data);
      updateData(newCandle);
    };
    return () => ws.close();
  }, []);

  return (
    <StockGraph
      type="candlestick"
      data={data}
      realtime={{ enabled: true, bufferSize: 1000 }}
      style={{ height: 320 }}
    />
  );
};

High-Performance Skia Backend

<StockGraph
  type="candlestick"
  data={largeDataset} // 10k+ points
  renderBackend="skia"
  performance={{
    enableVirtualization: true,
    maxVisiblePoints: 1000,
    throttleMs: 16
  }}
  style={{ height: 320 }}
/>

🎨 Theming

Built-in Themes

import { DEFAULT_THEME, DEFAULT_DARK_THEME } from 'react-native-stock-graphs';

// Light theme
<StockGraph theme={DEFAULT_THEME} />

// Dark theme
<StockGraph theme={DEFAULT_DARK_THEME} />

Custom Theme

const customTheme = {
  background: '#1a1a1a',
  gridColor: '#333333',
  textColor: '#ffffff',
  candleUp: '#00ff88',
  candleDown: '#ff4444',
  lineColor: '#00aaff',
  crosshairColor: '#888888',
  tooltipBackground: '#333333',
  tooltipText: '#ffffff'
};

<StockGraph theme={customTheme} />

🔧 Utility Functions

Technical Indicators

import {
  calculateSMA,
  calculateEMA,
  calculateBollingerBands,
  calculateRSI
} from 'react-native-stock-graphs';

const prices = data.map(d => d.close);
const sma20 = calculateSMA(prices, 20);
const ema50 = calculateEMA(prices, 50);
const bollinger = calculateBollingerBands(prices, 20, 2);
const rsi = calculateRSI(prices, 14);

Chart Utilities

import {
  formatPrice,
  formatTime,
  getTimeRange,
  getPriceRange
} from 'react-native-stock-graphs';

const timeRange = getTimeRange(data);
const priceRange = getPriceRange(data);
const formattedPrice = formatPrice(123.456); // "123.46"
const formattedTime = formatTime(1640995200000); // "Jan 01"

🧪 Testing

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Run tests in watch mode
npm run test:watch

🏗️ Development

# Clone the repository
git clone https://github.com/yourusername/react-native-stock-graphs.git
cd react-native-stock-graphs

# Install dependencies
npm install

# Run the example app
cd example
npm install
npm start

Building

# Build the library
npm run build

# Build and watch for changes
npm run build:watch

# Type check
npm run type-check

# Lint
npm run lint

# Format code
npm run format

📱 Example App

The example app demonstrates all features:

• Different chart types
• Technical indicators
• Real-time updates
• Theme switching
• Performance testing

cd example
npm install
npm start

🚀 Publishing

# Publish canary version
npm run publish:canary

# Publish production version
npm run publish:prod

📊 Performance

Benchmarks

| Dataset Size | SVG Backend | Skia Backend | Memory Usage | |--------------|-------------|--------------|-------------| | 1,000 points | 60 FPS | 60 FPS | ~50MB | | 5,000 points | 45 FPS | 60 FPS | ~80MB | | 10,000 points | 25 FPS | 60 FPS | ~120MB | | 50,000 points | 10 FPS | 55 FPS | ~300MB |

Performance Tips

1. Use Skia backend for large datasets (>5k points)
2. Enable virtualization for very large datasets
3. Throttle gesture updates for smoother interactions
4. Use data decimation when zoomed out
5. Limit indicator calculations to visible range

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Run the test suite
6. Submit a pull request

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• react-native-svg for SVG rendering
• @shopify/react-native-skia for high-performance rendering
• TradingView for chart inspiration

📞 Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions
• 📧 Email Support

Made with ❤️ for the React Native community