React Financial Chart Overview

The React financial chart component makes it easy to visualize financial and stock data by using a simple and intuitive API.


Edit on CodeSandbox

Once the user binds the data, the React chart offers multiple ways in which the data can then be visualized and interpreted. There are several display modes for price and volume and a host of financial indicators. The chart also makes use of label formatting to give context to the data.

The React financial chart component analyzes and selects data columns - Date/Time column to use for x-axis and Open, High, Low, Close, Volume columns or the first 5 numeric columns for y-axis. Beyond this, the user can specify the chart type to either Bar, Candle, Column, and Line. With its five main visual elements, a toolbar, a prices view, a volume view, an indicators view, and a navigation view, data has become more perceptible.

You can explicitly specify the chart type by setting the chartType property to one of the following options:

Property Description
Bar Specifies the bar series with markers at each data point
Candle Specifies the candle series
Column Specifies the column series
Line Specifies the line series
Auto Specifies automatic selection of chart type based on Data Adapter which suggest one of above values based names and number of numeric columns in your data. For example, it will suggest Bar for data items with Open, High, Low, Close columns.

Refer to the Financial Chart Panes topics for information on other chart panes.

    chartType="candle" />


When installing the chart package, the core package must also be installed.

npm install --save igniteui-react-core
npm install --save igniteui-react-charts

Required Modules

The React Financial Chart component requires the following modules. to be registered in your application entry point:

  • FinancialChartModule
import { IgrFinancialChartModule } from 'igniteui-react-charts';



Now that the financial chart module is imported, next step is to bind it to data.

In order to create an IgrFinancialChart control, you must first have data to bind it to. The following code snippet demonstrates how to create a simple data source.

let data = [
    { time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
    { time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
    { time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
    { time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
    { time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
    { time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
    { time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
    { time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
    { time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
    { time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
    { time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }

The following code demonstrates how to bind the financial chart to the above data.

    dataSource={} />


A toolbar is displayed at the top of the React financial chart. This allows your end users to change various details about the data being displayed, and also displays different panes. The toolbar consists of the following selectors:

  • Indicator Type Selector - Allows users to select multiple types of financial indicators. These indicators are displayed below the price pane in their own panes because they do not share the same Y-Axis scale with the prices or other indicators.
  • Overlay Type Selector - Allows users to select different types of financial overlays. These overlays are displayed together with the financial prices series because they share the same y-axis scale. There are two types of overlays the BollingerBands and PriceChannel.
  • Trendline Type Selector - Allows users to select different types of trendlines. The trendline is displayed in a trendline layer over the price pane and the volume pane.
  • Date Range Selector - Allows users to select different range presets to view the data. Note that some buttons will not be functional if your data range is less 1 year.
  • Chart Type Selector - Allows users to select chart types for the financial chart. These are displayed in the price pane.
  • Volume Type Selector - Allows users to view the stock volume data in the Volume Pane. Users can choose between None, Column, Line, and Area chart types.

Note that depending on the width of the financial chart, the toolbar might not contain all of the elements discussed in above section. Increasing width of the financial chart and its container will cause the toolbar to display more of these selectors.

Also, you can hide the toolbar if you wish to maximize vertical space for the chart panes. The following code show how to hide the toolbar:

    isToolbarVisible={false} />

Additional Resources