React Native

The charting library provides a React Native component that renders charts using a WebView.

Installation

npm install financial-charting-library
# or
yarn add financial-charting-library

Important: WebView-Based

The React Native component uses a WebView to render the chart, since the charting library requires browser APIs.

Basic Usage

1. Import the Component

import { Chart } from 'financial-charting-library/react-native';

2. Use in Your Component

import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { Chart } from 'financial-charting-library/react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.chartContainer}>
        <Chart
          symbol="AAPL"
          interval="1D"
          theme="light"
          libraryPath="https://your-cdn.com/financial-charting-library.js"
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  chartContainer: {
    flex: 1,
  },
});

export default App;

Props

The React Native Chart component accepts these props:

Prop	Type	Description
`symbol`	`string`	Required - Symbol to display
`interval`	`string`	Required - Timeframe
`theme`	`string`	'light' or 'dark'
`libraryPath`	`string`	Required - URL to the charting library JS file
`customDatafeedScript`	`string`	JavaScript code for your datafeed
`onChartReady`	`function`	Callback when chart is ready

Providing a Datafeed

You need to provide a datafeed by injecting JavaScript code:

import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';
import { Chart } from 'financial-charting-library/react-native';

const App = () => {
  // Define your datafeed as a JavaScript string
  const customDatafeedScript = `
    class MyDataFeed {
      onReady(callback) {
        setTimeout(() => callback({
          supported_resolutions: ['1', '5', '15', '1D', '1W']
        }), 0);
      }
      
      resolveSymbol(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
        onSymbolResolvedCallback({
          name: symbolName,
          full_name: symbolName,
          description: symbolName,
          type: 'stock',
          session: '24x7',
          timezone: 'Etc/UTC',
          minmov: 1,
          pricescale: 100,
          has_intraday: true,
          supported_resolutions: ['1', '5', '15', '1D', '1W'],
          volume_precision: 2,
          data_status: 'streaming',
        });
      }
      
      getBars(symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) {
        const bars = [];
        let time = periodParams.from * 1000;
        const to = periodParams.to * 1000;
        
        while (time < to) {
          bars.push({
            time: time,
            open: 100 + Math.random() * 10,
            high: 110 + Math.random() * 10,
            low: 90 + Math.random() * 10,
            close: 100 + Math.random() * 10,
            volume: 1000
          });
          time += 86400000; // 1 day
        }
        
        onHistoryCallback(bars, { noData: false });
      }
      
      subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) {
        // Implement real-time updates
      }
      
      unsubscribeBars(subscriberUID) {
        // Cleanup subscription
      }
    }
    
    const datafeed = new MyDataFeed();
  `;

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.chartContainer}>
        <Chart
          symbol="AAPL"
          interval="1D"
          theme="light"
          libraryPath="https://your-cdn.com/financial-charting-library.js"
          customDatafeedScript={customDatafeedScript}
          onChartReady={() => console.log('Chart is ready!')}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  chartContainer: {
    flex: 1,
  },
});

export default App;

Complete Example

Here's a full example with controls:

import React, { useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import { Chart } from 'financial-charting-library/react-native';

const App = () => {
  const [symbol, setSymbol] = useState('AAPL');
  const [theme, setTheme] = useState('light');

  const customDatafeedScript = `
    class MyDataFeed {
      onReady(callback) {
        setTimeout(() => callback({
          supported_resolutions: ['1', '5', '15', '1D', '1W']
        }), 0);
      }
      
      resolveSymbol(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
        onSymbolResolvedCallback({
          name: symbolName,
          full_name: symbolName,
          description: symbolName,
          type: 'stock',
          session: '24x7',
          timezone: 'Etc/UTC',
          minmov: 1,
          pricescale: 100,
          has_intraday: true,
          supported_resolutions: ['1', '5', '15', '1D', '1W'],
          volume_precision: 2,
          data_status: 'streaming',
        });
      }
      
      getBars(symbolInfo, resolution, periodParams, onHistoryCallback, onErrorCallback) {
        const bars = [];
        let time = periodParams.from * 1000;
        const to = periodParams.to * 1000;
        
        while (time < to) {
          bars.push({
            time: time,
            open: 100 + Math.random() * 10,
            high: 110 + Math.random() * 10,
            low: 90 + Math.random() * 10,
            close: 100 + Math.random() * 10,
            volume: 1000
          });
          time += 86400000;
        }
        
        onHistoryCallback(bars, { noData: false });
      }
      
      subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) {}
      unsubscribeBars(subscriberUID) {}
    }
    
    const datafeed = new MyDataFeed();
  `;

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <Text style={styles.title}>Financial Chart - React Native</Text>
      </View>

      {/* Controls */}
      <View style={styles.controls}>
        <TouchableOpacity 
          style={styles.button}
          onPress={() => setSymbol('AAPL')}
        >
          <Text style={styles.buttonText}>AAPL</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.button}
          onPress={() => setSymbol('GOOGL')}
        >
          <Text style={styles.buttonText}>GOOGL</Text>
        </TouchableOpacity>
        
        <TouchableOpacity 
          style={styles.button}
          onPress={toggleTheme}
        >
          <Text style={styles.buttonText}>Toggle Theme ({theme})</Text>
        </TouchableOpacity>
      </View>

      {/* Chart */}
      <View style={styles.chartContainer}>
        <Chart
          symbol={symbol}
          interval="1D"
          theme={theme}
          libraryPath="https://your-cdn.com/financial-charting-library.js"
          customDatafeedScript={customDatafeedScript}
          onChartReady={() => console.log('Chart ready!')}
        />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  header: {
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  controls: {
    flexDirection: 'row',
    padding: 10,
    gap: 10,
    backgroundColor: '#fff',
  },
  button: {
    padding: 10,
    backgroundColor: '#007bff',
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 14,
  },
  chartContainer: {
    flex: 1,
  },
});

export default App;

Hosting the Library

You need to host the charting library JavaScript file. Options include:

CDN: Upload to a CDN and use the URL
Local Server: Serve from your local development server
App Bundle: Include as an asset in your app

// Using a local file (development)
libraryPath="http://localhost:3000/financial-charting-library.js"

// Using a CDN (production)
libraryPath="https://your-cdn.com/financial-charting-library.js"

Installation​

Important: WebView-Based​

Basic Usage​

1. Import the Component​

2. Use in Your Component​

Props​

Providing a Datafeed​

Complete Example​

Hosting the Library​

Next Steps​