New to Kendo UI for Angular? Start a free 30-day trial

Manage Chart Performance Issues

Product

Progress® Kendo UI® for Angular Charts

Description

Optimizing performance is crucial when handling large datasets or rendering on mobile devices with the Kendo UI for Angular Charts. This guide outlines key tips and tricks to enhance rendering speed and responsiveness.

Cause

The performance of the Angular Chart component can be affected by various factors, such as the number of data points, the complexity of the data, the rendering mode, and the configuration settings. When the Chart is slow to render or lags, it can be challenging to visualize the data and provide a smooth user experience.

Solution

To improve the performance of the Angular Chart component, consider the following tips and tricks:

Using Canvas Rendering
Turning Off Animated Transitions
Disabling Gradients
Reducing the Number of Rendered Elements

Using Canvas Rendering

Switching to Canvas rendering improves the performance of the Angular Chart component, especially on mobile devices, and facilitates the visualization of data by its fast update and lower resource usage. For more information on configuration settings, refer to the Rendering Modes article.

typescript

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart renderAs="canvas">
            <!-- Chart content goes here -->
        </kendo-chart>
    `
})
export class AppComponent {
}

Turning Off Animated Transitions

Animated transitions can slow down the rendering of the Angular Chart component. To improve the performance, consider turning off the animations by setting the transitions property to false.

typescript

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart [transitions]="false">
            <!-- Chart content goes here -->
        </kendo-chart>
    `
})
export class AppComponent {
}

Disabling Gradients

Gradients can also affect the performance of the Angular Chart component. To improve the rendering speed, consider disabling the gradients by setting the Overlay gradient property to none.

typescript

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
            <kendo-chart-series-defaults [overlay]="{gradient: 'none'}">
            </kendo-chart-series-defaults>
        </kendo-chart>
    `
})
export class AppComponent {
}

Reducing the Number of Rendered Elements

When you have a lot of data points and categories, rendering all of them slows the Chart and makes it hard to read by the end user.

To improve both aspects, hide certain Chart elements, for example:

Hide minor and major grid lines on the X axis where many categories exist.
Set a step for the category axis labels so only the n^th label is rendered.
Use a shorter format string for date axis labels.
Entirely hide labels for series and/or axes.

The following code snippet demonstrates how these suggestions can be implemented. You can further adjust the settings based on your dataset and axis configuration.

typescript

import { Component } from '@angular/core';
import { CategoryAxisLabels } from '@progress/kendo-angular-charts';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chart>
            <kendo-chart-category-axis>
                <kendo-chart-category-axis-item 
                [minorGridLines]="{visible: false}" 
                [majorGridLines]="{visible: false}"
                [labels]="labels">
                </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
        </kendo-chart>
    `,
})
export class AppComponent {
    public labels: CategoryAxisLabels = {
        step: 60, // Every hourly label so they don't overlap.
        rotation: 90, // Rotate so they take up less horizontal space and also reduce overlap
        dateFormats: { days: 'HH:mm' }, // Use shorter format for the labels.
        // visible: false, // Hide the labels.
    };
}