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 theLine
chart type and it is recommended when rendering data items with single numeric value.Bar
- is more expensive to render than theColumn
chart type and it is recommended when rendering data items with OHLC numeric values.Candle
- is more expensive to render than theBar
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 theLine
volume type.Column
- is more expensive to render than theArea
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 theOrdinal
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:
xAxisTitle
yAxisTitle
xAxisTickStroke
yAxisTickStroke
xAxisMajorStroke
yAxisMajorStroke
xAxisMinorStroke
yAxisMinorStroke
xAxisLabel
yAxisLabel
xAxisStroke
yAxisStroke
xAxisStrip
yAxisStrip
yAxisInterval