Skip to main content

React

The charting library provides a React component that makes it easy to integrate charts into your React applications.

Installation​

First, install the library:

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

Basic Usage​

1. Import the Component​

import React, { useRef, useMemo } from 'react';
import { ChartComponent, ChartComponentRef } from 'financial-charting-library/react';

2. Create Your Component​

import React, { useRef, useMemo } from 'react';
import { ChartComponent, ChartComponentRef } from 'financial-charting-library/react';

function App() {
  const chartRef = useRef<ChartComponentRef>(null);

  // Create datafeed (memoize to prevent recreating)
  const datafeed = useMemo(() => {
    return new YourDataFeedImplementation();
  }, []);

  const handleChartReady = () => {
    console.log('Chart is ready');
    
    // Access the chart API
    const api = chartRef.current?.api();
    if (api) {
      console.log('API available:', api);
      // You can now use the API
      // api.addIndicator('RSI');
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Financial Chart</h1>
      <ChartComponent
        ref={chartRef}
        datafeed={datafeed}
        symbol="AAPL"
        interval="1D"
        theme="light"
        width={800}
        height={500}
        onChartReady={handleChartReady}
      />
    </div>
  );
}

export default App;

Props​

The ChartComponent accepts these props:

PropTypeDescription
datafeedIBasicDataFeedRequired - Your datafeed implementation
symbolstringRequired - Default symbol to display
intervalstringRequired - Default timeframe ('1', '5', '1D', etc.)
themestringChart theme: 'light' or 'dark' (default: 'light')
widthnumber | stringChart width (default: '100%')
heightnumber | stringChart height in pixels (default: 600)
onChartReady() => voidCallback when chart is initialized

Using the Chart API​

You can access the full Chart API through the ref:

import React, { useRef, useMemo } from 'react';
import { ChartComponent, ChartComponentRef } from 'financial-charting-library/react';

function App() {
  const chartRef = useRef<ChartComponentRef>(null);

  const datafeed = useMemo(() => {
    return new YourDataFeedImplementation();
  }, []);

  const addRSI = () => {
    const api = chartRef.current?.api();
    if (api) {
      api.addIndicator('RSI');
    }
  };

  const changeSymbol = () => {
    const api = chartRef.current?.api();
    if (api) {
      api.setSymbol('GOOGL', '1D');
    }
  };

  return (
    <div>
      <button onClick={addRSI}>Add RSI</button>
      <button onClick={changeSymbol}>Change to GOOGL</button>
      
      <ChartComponent
        ref={chartRef}
        datafeed={datafeed}
        symbol="AAPL"
        interval="1D"
        theme="light"
        width={800}
        height={500}
      />
    </div>
  );
}

export default App;

Complete Example​

Here's a complete working example with controls:

import React, { useRef, useMemo, useState } from 'react';
import { ChartComponent, ChartComponentRef } from 'financial-charting-library/react';

function App() {
  const chartRef = useRef<ChartComponentRef>(null);
  const [symbol, setSymbol] = useState('AAPL');

  const datafeed = useMemo(() => {
    return new YourDataFeedImplementation();
  }, []);

  const handleChartReady = () => {
    console.log('Chart ready!');
  };

  const addIndicator = (name) => {
    const api = chartRef.current?.api();
    if (api) {
      api.addIndicator(name);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>Financial Chart - React Example</h1>
      
      {/* Controls */}
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        <button onClick={() => addIndicator('RSI')}>Add RSI</button>
        <button onClick={() => addIndicator('MACD')}>Add MACD</button>
        <button onClick={() => addIndicator('Bollinger Bands')}>Add Bollinger Bands</button>
        <button onClick={() => setSymbol('GOOGL')}>Change to GOOGL</button>
        <button onClick={() => setSymbol('MSFT')}>Change to MSFT</button>
      </div>

      {/* Chart */}
      <ChartComponent
        ref={chartRef}
        datafeed={datafeed}
        symbol={symbol}
        interval="1D"
        theme="light"
        width="100%"
        height={600}
        onChartReady={handleChartReady}
      />
    </div>
  );
}

export default App;

TypeScript Support​

The library includes full TypeScript definitions:

import React, { useRef, useMemo } from 'react';
import { ChartComponent, ChartComponentRef } from 'financial-charting-library/react';
import { IBasicDataFeed } from 'financial-charting-library';

const App: React.FC = () => {
  const chartRef = useRef<ChartComponentRef>(null);

  const datafeed = useMemo((): IBasicDataFeed => {
    return new YourDataFeedImplementation();
  }, []);

  return (
    <ChartComponent
      ref={chartRef}
      datafeed={datafeed}
      symbol="AAPL"
      interval="1D"
    />
  );
};

export default App;

Next Steps​