Angular Chart Performance

The Angular 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.

Angular Chart Performance Example

The following code demonstrates how to bind the Angular 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);
    }
}

 <igx-financial-chart
    [dataSource]="data"
    width="850px"
    height="600px">
 </igx-financial-chart>

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

  • When storing lots of data in properties in your components to bind against, you should make sure to set changeDetection: ChangeDetectionStrategy.OnPush in your @Component decorator. Setting this will tell Angular not to dig deeply into changes within your data array, something you don't want Angular doing every change detection cycle.
  • Instead of Angular automatically telling the charts how they should react to data changes, its your responsibility to notify the components how the data they have been bound to has been modified. Reacting to these delta notifications can be done much more efficiently than to have to compare a 1M record array for any changes, every time Angular runs a change detection. Look for the notify* methods on each chart for more information about how to notify the chart of changes to the data it is bound against.
  • When Angular is in Debug mode, there is a lot of overhead in some browsers that will drag down performance. When evaluating real world performance always make sure to serve or build with --prod version.

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