React Chart Performance

The React financial chart component has very good performance of rendering a lot of data points. The following demo binds 20 years of data, with 1 day intervals and displays the stock prices using candle sticks.

React Chart Performance Example

Edit on CodeSandbox

The following code demonstrates how to bind the React financial chart to high volumes of data.

import { GenerateOhlcPricesService } from "../services/generate-ohlc-prices.service";

export class AppComponent {
    public data: any;

    constructor(private dataService: GenerateOhlcPricesService) {
        const dateEnd = new Date(2018, 3, 20); // April 20, 2018
        const dateStart = new Date(1998, 3, 20); // April 20, 1998
        this.data = this.dataService.GetStockHistoryBetween(dateStart, dateEnd);
    }
}
 <IgrFinancialChart
    width="850px"
    height="600px"
    dataSource={this.data} />

There are several React specific features that affect performance of the chart and they should be considered when optimizing performance in your application.

  • When React is in development mode, there is a lot of overhead in some browsers that will drag down performance. When evaluating real world performance always make sure to use production builds.

Also, you should consider the following features of the financial chart when optimizing performance in your application.

Chart Type

Setting the chartType option can have the following impact on chart performance:

  • Line - is the least expensive chart type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
  • Column - is more expensive to render than the Line chart type and it is recommended when rendering data items with single numeric value.
  • Bar - is more expensive to render than the Column chart type and it is recommended when rendering data items with OHLC numeric values.
  • Candle - is more expensive to render than the Bar chart type and it is also recommended when rendering data items with OHLC numeric values.

Volume Type

Setting the volumeType option can have the following impact on chart performance:

  • Line - is the least expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
  • Area - is more expensive to render than the Line volume type.
  • Column - is more expensive to render than the Area volume type and it is recommended when rendering volume data of 1-3 stocks.
  • None - does not display the volume pane.

Marker Type

Setting the MarkerType option to none will decrease the amount of items to render than any other type.

Legend Visibility

Setting the isLegendVisible option to false will increase performance since the legend will not be drawn.

Zoom Slider Type

Setting the zoomSliderType option to none will improve chart performance and enable more vertical space for other indicators and the volume pane.

Chart Panes

Setting a lot of panes using FinancialIndicatorType and FinancialOverlayType options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.

X-Axis Mode

Setting the xAxisMode option can have the following impact on chart performance:

  • Ordinal - is the least expensive x-axis mode to use in the financial chart and it is recommended when rendering of break in data range (e.g. weekends or holidays) is not important.
  • Time - is more expensive expensive than the Ordinal to use in the financial chart. It is recommended when rendering of break in data range (e.g. weekends or holidays) is required.

Y-Axis Mode

Setting the yAxisMode option to numeric is recommended for higher performance, as fewer operations are needed than using PercentChange mode.

Annotations

Enabling the Callout Annotations (calloutsVisible) or Final Value Annotations (finalValueAnnotationsVisible) will decrease performance of the financial chart.

Axis Visuals

By default, the financial chart is already optimized for the best performance and enabling additional visuals of the chart might decrease performance, for example the following options:

Additional Resources