Angular Chart Performance
Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Angular charts work as fast as possible in your application.
Angular Chart Performance Examples
The following examples demonstrates two high performance scenarios of Angular charts.
Angular Chart with High-Frequency
In High-Frequency scenario, the Angular Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the IgxCategoryChartComponent in High-Frequency scenario.
Angular Chart with High-Volume
In High-Volume scenario, the Angular Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the IgxCategoryChartComponent in High-Volume scenario.
General Performance Guidelines
This section lists guidelines and chart features that add to the overhead and processing updates in the Angular charts.
Data Size
If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Angular IgxDataChartComponent with one of the following type of series which where designed for specially for that purpose.
- Scatter HD Chart instead of Category Point Chart or Scatter Marker Chart
- Scatter Polyline Chart instead of Category Line Chart or Scatter Line Chart
- Scatter Polygon Chart instead of Category Area Chart or Column Chart
Data Structure
Although Angular charts support rendering of multiple data sources by binding array of arrays of data points to ItemsSource property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:
this.CategoryChart.dataSource = FlattenDataSource.create();
this.FinancialChart.dataSource = FlattenDataSource.create();
export class FlattenDataSource {
public static create(): any[] {
const data: any[] = [];
data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
return data;
}
}
// instead of this data structure:
export class MultiDataSources {
public static create(): any[] {
const dataSource1: any[] = [];
dataSource1.push({ "Year": "1996", "Value": 148 });
dataSource1.push({ "Year": "2000", "Value": 142 });
const dataSource2: any[] = [];
dataSource2.push({ "Year": "1996", "Value": 110 });
dataSource2.push({ "Year": "2000", "Value": 115 });
const multipleSources: any[] = [dataSource1, dataSource2];
return multipleSources;
}
}
Data Filtering
Angular IgxCategoryChartComponent and the IgxFinancialChartComponent controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use includedProperties and excludedProperties to filter only those data columns that you actually want to render. For example,
this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
Chart Performance Guidelines
Chart Types
Simpler chart types such as Line Chart have faster performance than using Spline Chart because of the complex interpolation of spline lines between data points. Therefore, you should use chartType property of Angular IgxCategoryChartComponent or the IgxFinancialChartComponent control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Angular IgxDataChartComponent control.
The following table lists chart types in order from the fastest performance to slower performance in each group of charts:
* Note that the Scatter Polygon Chart and Scatter Polyline Chart have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see Series Collection section. Otherwise, other chart types are faster.
Chart Animations
Enabling Chart Animations will slightly delay final rendering series in the Angular charts while they play transition-in animations.
Chart Annotations
Enabling Chart Annotations such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
Chart Highlighting
Enabling the Chart Highlighting will slightly decrease performance of the Angular chart.
Chart Legend
Adding a legend to the Angular charts might decrease performance if titles of series or data items mapped to legend are changing often at runtime.
Chart Markers
In Angular charts, Markers are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
This code snippet shows how to remove markers from the Angular charts.
// on CategoryChart or FinancialChart
this.Chart.markerTypes.clear();
this.Chart.markerTypes.add(MarkerType.None);
// on LineSeries of DataChart
this.LineSeries.markerType = MarkerType.None;
Chart Resolution
Setting the resolution property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.
This code snippet shows how to decrease resolution in the Angular charts.
// on CategoryChart or FinancialChart:
this.Chart.Resolution = 10;
// on LineSeries of DataChart:
this.LineSeries.Resolution = 10;
Chart Overlays
Enabling Chart Overlays will slightly decrease performance of the Angular chart.
Chart Trendlines
Enabling Chart Trendlines will slightly decrease performance of the Angular chart.
Axis Types
Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does.
[!Note] The
IgxCategoryChartComponentalready uses ordinal/category axis so there is no need to change its properties.
This code snippet shows how to ordinal/category x-axis in the IgxFinancialChartComponent and IgxDataChartComponent controls.
<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis label="Time"></igx-category-x-axis>
</igx-data-chart>
Axis Intervals
By default, Angular charts will automatically calculate yAxisInterval based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing yAxisInterval property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
[!Note] We do not recommend setting axis minor interval as it will decrease chart performance.
This code snippet shows how to set axis major interval in the Angular charts.
<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
</igx-data-chart>
Axis Scale
Setting the yAxisIsLogarithmic property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
Axis Labels Visibility
In the same way as Markers, axis labels are also expensive because they use templates and bindings, and may have their data context changed often. If labels are not used, they should be hidden or their interval should be increased to decrease number of axis labels.
This code snippet shows how to hide axis labels in the Angular charts.
<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-category-chart>
<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
</igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Abbreviation
Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when yAxisAbbreviateLargeNumbers is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting yAxisTitle to a string that represents factor used used to abbreviate your data values.
This code snippet shows how to set axis title in the Angular charts.
<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
<igx-data-chart>
<igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
</igx-data-chart>
Axis Labels Extent
At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance.
The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts.
<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
<igx-data-chart>
<igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
<igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
</igx-data-chart>
Axis Other Visuals
Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts.
For example, changing these properties on the IgxCategoryChartComponent or IgxFinancialChartComponent control:
| Axis Visual | X-Axis Properties | Y-Axis Properties |
|---|---|---|
| All Axis Visual | xAxisIntervalxAxisMinorInterval |
yAxisIntervalyAxisMinorInterval |
| Axis Tickmarks | xAxisTickStroke xAxisTickStrokeThicknessxAxisTickLength |
yAxisTickStroke yAxisTickStrokeThicknessyAxisTickLength |
| Axis Major Gridlines | xAxisMajorStrokexAxisMajorStrokeThickness |
yAxisMajorStrokeyAxisMajorStrokeThickness |
| Axis Minor Gridlines | xAxisMinorStrokexAxisMinorStrokeThickness |
yAxisMinorStrokeyAxisMinorStrokeThickness |
| Axis Main Line | xAxisStrokexAxisStrokeThickness |
yAxisStrokeyAxisStrokeThickness |
| Axis Titles | xAxisTitlexAxisTitleAngle |
yAxisTitleyAxisTitleAngle |
| Axis Strips | xAxisStrip |
yAxisStrip |
Or changing properties of an IgxAxisComponent in the IgxDataChartComponent control:
| Axis Visual | Axis Properties |
|---|---|
| All Axis Visuals | Interval, MinorInterval |
| Axis Tickmarks | TickStroke , TickStrokeThickness, TickLength |
| Axis Major Gridlines | MajorStroke, MajorStrokeThickness |
| Axis Minor Gridlines | MinorStroke, MinorStrokeThickness |
| Axis Main Line | Stroke, StrokeThickness |
| Axis Titles | chartTitle, TitleAngle |
| Axis Strips | Strip |
Performance in Financial Chart
In addition to above performance guidelines, the Angular IgxFinancialChartComponent control has the following unique features that affect performance.
Y-Axis Mode
Setting the yAxisMode option to Numeric is recommended for higher performance, as fewer operations are needed than using PercentChange mode.
Chart Panes
Setting a lot of panes using indicatorTypes and overlayTypes options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.
Zoom Slider
Setting the zoomSliderType option to None will improve chart performance and enable more vertical space for other indicators and the volume pane.
Volume Type
Setting the volumeType property can have the following impact on chart performance:
None- is the least expensive since it does not display the volume pane.Line- is more 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 theLinevolume type.Column- is more expensive to render than theAreavolume type and it is recommended when rendering volume data of 1-3 stocks.
Performance in Data Chart
In addition to the general performance guidelines, the Angular IgxDataChartComponent control has the following unique features that affect performance.
Axes Collection
Adding too many axis to the Axes collection of the IgxDataChartComponent control will decrease chart performance and we recommend Sharing Axes between series.
Series Collection
Also, adding a lot of series to the IgxSeriesComponent collection of the Angular IgxDataChartComponent control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see Data Structure section) and then using conditional styling feature of the following series:
| Slower Performance Scenario | Faster Scenario with Conditional Styling |
|---|---|
10+ of IgxLineSeriesComponent |
Single IgxScatterLineSeriesComponent |
20+ of IgxLineSeriesComponent |
Single IgxScatterPolylineSeriesComponent |
10+ of IgxScatterLineSeriesComponent |
Single IgxScatterPolylineSeriesComponent |
10+ of IgxPointSeriesComponent |
Single IgxScatterSeriesComponent |
20+ of IgxPointSeriesComponent |
Single IgxHighDensityScatterSeriesComponent |
20+ of IgxScatterSeriesComponent |
Single IgxHighDensityScatterSeriesComponent |
10+ of IgxAreaSeriesComponent |
Single IgxScatterPolygonSeriesComponent |
10+ of IgxColumnSeriesComponent |
Single IgxScatterPolygonSeriesComponent |
Additional Resources
You can find more information about related chart types in these topics:
- Area Chart
- Bar Chart
- Bubble Chart
- Column Chart
- Donut Chart
- Pie Chart
- Point Chart
- Polar Chart
- Radial Chart
- Shape Chart
- Spline Chart
- Scatter Chart
- Stacked Chart
- Step Chart
- Stock Chart
- Chart Animations
- Chart Annotations
- Chart Highlighting
- Chart Markers
- Chart Overlays
- Chart Trendlines
API References
The following table lists API members mentioned in above sections:
resolutionindicatorTypesoverlayTypesvolumeTypezoomSliderTypexAxisModeyAxisModexAxisIntervalyAxisIntervalxAxisMinorIntervalyAxisMinorIntervalxAxisLabelVisibilityyAxisLabelVisibilityyAxisIsLogarithmic
GitHub