React Financial Charts

React Financial Charts is a library dedicated to creating financial charts that work out of the box. It supports multiple chart types, technical indicators, overlays, and drawing objects.

Supported Chart Types

• Scatter
• Area
• Line
• Candlestick
• OHLC
• HeikenAshi
• Renko
• Kagi
• Point & Figure

Technical Indicators

• Moving Averages: EMA, SMA, WMA, TMA
• Bollinger band
• SAR
• MACD
• RSI
• ATR
• Stochastic (fast, slow, full)
• ForceIndex
• ElderRay
• Elder Impulse

Interactive Indicators (Drawing Objects)

• Trendline
• Fibonacci Retracements
• Gann Fan
• Channel
• Linear regression channel

React Financial Charts is a library dedicated to creating financial charts. It provides a comprehensive set of tools for financial data visualization, including:

• Integration of multiple chart types
• Support for technical indicators and overlays
• Support for drawing objects

To use React Financial Charts in your project, install the main package using npm:

npm install react-financial-charts

To use the tooltip functionality in your project, install the @react-financial-charts/tooltip package via npm.

npm i @react-financial-charts/tooltip

To use the utility functions provided by the library, install the @react-financial-charts/utils package via npm.

npm i @react-financial-charts/utils

To use the series components in your project, install the @react-financial-charts/series package via npm.

npm i @react-financial-charts/series

To use the axes functionality in your project, install the @react-financial-charts/axes package via npm.

npm i @react-financial-charts/axes

To use annotations in your React Financial Charts project, install the @react-financial-charts/annotations package via npm.

npm i @react-financial-charts/annotations

To use axes components in your project, install the @react-financial-charts/axes package via npm.

npm i @react-financial-charts/axes

Install the coordinates package using npm to access coordinate-related utilities in your financial charts.

npm i @react-financial-charts/coordinates

If you are contributing to the project or want to run the mono-repo locally, follow these steps to clone, install dependencies, and build the project:

1. Clone the repository
2. Install dependencies using npm ci
3. Build the project

To start the development server, use npm start.

git clone https://github.com/react-financial/react-financial-charts.git
cd react-financial-charts
npm ci
npm run build

# To start the development server
npm start

To use interactive features in your financial charts, install the @react-financial-charts/interactive package via npm.

npm i @react-financial-charts/interactive