Angular Chart - Enhance Performance on Large Datasets

This help topic describes how to improve Chart performance by rendering less data when working with large datasets.

Implement Zoom and Pan Operations

Enable zoom and pan to improve performance with long argument axes. Configure these features in the zoomAndPan object. Zooming and panning actions allow users to load smaller data sets and scroll through the chart. To load a smaller data set on component initialization, specify the initial zoom level. For instructions on how to do this, refer to the following topic: Set the Initial Zoom.

To optimize Chart performance further, use on-demand data loading. See the demo for details:

View Demo

Data Aggregation

You can group data and show summary values to reduce the number of points. To do this, set one of the following properties to true:

• series.aggregation.enabled: Enables aggregation for a specific series.
• commonSeriesSettings.aggregation.enabled: Enables aggregation for all series.

For discrete axes, you do not need to define additional parameters to enable aggregation. For continuous and logarithmic axes, specify one of the following properties:

• argumentAxis.aggregationInterval: Defines the aggregation interval in axis units.
• argumentAxis.aggregationGroupWidth: Defines the aggregation interval in pixels.

For more information on data aggregation, refer to the following help topic: Data Aggregation.

Hide Chart Elements

You can reduce the number of visible elements to improve Chart performance:

• Disable series.point.visible to render chart lines without markers.
• Hide unused series to render fewer chart lines and points. For more information about how to hide a series, refer to the following topic: Show and Hide a Series.
• Assign 'hide' to resolveLabelOverlapping to reduce the number of visible labels. For more information on how to resolve overlapping labels, refer to the following topic: Resolve Overlapping.
• Disable animations.