Maximizing Angular Charts Performance with Lazy Loading
Tags: angular, charts, datavisualization, web
Published: 2023-11-22 16:07:25

---
title: Maximizing Angular Charts Performance with Lazy Loading
published: true
date: 2023-11-15 11:37:33 UTC
tags: angular, charts, datavisualization, web 
canonical_url: https://www.syncfusion.com/blogs/post/lazy-loading-angular-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fzgszkjhh7ljwhvi9t1.png
---
The Syncfusion [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts "Angular Charts") component is a powerful tool for visualizing and presenting data. While charts are a great way to display information, they can become sluggish and difficult to manage when dealing with extensive data sets. This is where the lazy loading features come into play.

Lazy loading displays data based on user-defined criteria, such as a specified range or the number of data points to be displayed, instead of loading all records simultaneously. Lazy loading ensures that only the data within the current range or point count is rendered in the Charts while scrolling.

This blog will explore how lazy loading features can significantly improve performance and enhance the user experience when working with substantial data in Angular Charts.

**Note:** If you’re new to our Angular Charts, we recommend going through its [documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started "Getting started with Angular Charts component") before proceeding.

## Getting started with lazy loading in Angular Charts

As we get started, our primary focus will be on understanding and implementing point length and range.

### Using point length

With the **point length** concept in lazy loading, we can streamline the process of loading and displaying specific data segments from the data source on a chart. As users interact and scroll through the chart, the **scrollEnd** event is triggered, dynamically fetching and rendering the subsequent batch of data.

Let’s examine a practical example of this data-loading mechanism based on point length. In our initial load, we only loaded 200 data points out of the 1,000 available in the data source into the chart. As a result, only the initially loaded data will be visible to users. The **scrollEnd** event is activated as users scroll through, providing start and end values for the next data set. These values can be leveraged to load and populate the chart with pertinent data.

Refer to the following code example.

```js
import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';
@Component({
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' (scrollEnd)='scrollEnd($event)'>
        <e-series-collection>
            <e-series [dataSource]='data' type='Line' xName='x' yName='y'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public primaryXAxis?: Object;
        public data: Object[] = this.GetNumericData(1, 200);
    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            scrollbarSettings: { pointsLength: 1000 }
        };
    }
    public scrollEnd(args: IScrollEventArgs): void {
         //Assigning the next set of data to the chart based on the minimum and maximum values. 
          this.chart.series[0].dataSource = this.GetNumericData(args.currentRange.minimum as number, args.currentRange.maximum as number);
        this.chart.dataBind();
    };
}

public GetNumericData(start: number, end: number): { x: number, y: number }[] {
        let series: { x: number, y: number }[] = [];
        let value: number = 30;
        for (let i: number = start; i <= end; i++) {
            if (Math.random() > .5) {
                value += (Math.random() * 10 - 5);
            } else {
                value -= (Math.random() * 10 - 5);
            }
            if (value < 0) {
                value = this.getRandomInt(20, 40);
            }
            let point: { x: number, y: number } = { x: i, y: Math.round(value) };
            series.push(point);
        }
        return series;
}
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Lazy-loading-data-in-Angular-Charts-using-point-length-concept.gif" alt="Lazy loading data in Angular Charts using point length concept" style="width:100%">

  <figcaption>Lazy loading data in Angular Charts using point length concept</figcaption>

</figure>

### Using range

We can load and display a specific data range from the data source in a chart with the **range** concept in lazy loading. The **scrollEnd** event is triggered as users scroll, which dynamically loads and presents the subsequent data range.

For instance, in the following code example, we initially loaded data from January 1, 2009, to September 1, 2009. Consequently, only the data falling within this specified range will be visible. As users scroll, the **ScrollEnd** event will be triggered, providing the range for the next set of data. You can use these range values to load and populate the chart with the relevant data.

Refer to the following code example.

```js
import { Component, OnInit } from '@angular/core';
import { lineData } from './datasource';
@Component({
    selector: 'app-container',
    template: `<ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis' (scrollEnd)='scrollEnd($event)'>
        <e-series-collection>
         <e-series [dataSource]='chartData' type='Line' xName='x' yName='y'></e-series>
        </e-series-collection>
    </ejs-chart>`
})
export class AppComponent implements OnInit {
    public chartData?: Object[];
    public primaryXAxis?: Object;
    public data: Object[] = this.GetDateTimeData(new Date(2009, 0, 1), new Date(2009, 8, 1));
    ngOnInit(): void {
        this.chartData = lineData;
        this.primaryXAxis = {
            scrollbarSettings: {    
                 range: {
                     minimum: new Date(2009, 0, 1),
                     maximum: new Date(2014, 0, 1)
                 },
            }
        };
    }
   public scrollEnd(args: IScrollEventArgs): void {
        //Assigning next set of data to the chart based on the new range. 
         this.chart.series[0].dataSource = this.GetDateTimeData(args.currentRange.minimum as Date, args.currentRange.maximum as Date);        
        this.chart.dataBind();
   };
}

public GetDateTimeData(start: Date, end: Date): { x: Date, y: number }[] {
        let series: { x: Date, y: number }[] = [];
        let date: number;
        let value: number = 30;
        let option: DateFormatOptions = {
            skeleton: 'full',
            type: 'dateTime'
        };
        let dateParser: Function = this.intl.getDateParser(option);
        let dateFormatter: Function = this.intl.getDateFormat(option);
        for (let i: number = 0; start <= end; i++) {
            date = Date.parse(dateParser(dateFormatter(start)));
            if (Math.random() > .5) {
                value += (Math.random() * 10 - 5);
            } else {
                value -= (Math.random() * 10 - 5);
            }
            if (value < 0) {
                value = this.getRandomInt(20, 40);
            }
            let point: { x: Date, y: number } = { x: new Date(date), y: Math.round(value) };
            new Date(start.setDate(start.getDate() + 1));
            series.push(point);
        
        return series;
}
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Lazy-loading-data-in-Angular-Charts-using-range-concept.gif" alt="Lazy loading data in Angular Charts using range concept" style="width:100%">

  <figcaption>Lazy loading data in Angular Charts using range concept</figcaption>

</figure>

## References

For more details, refer to the [lazy loading in the Angular Charts demo](https://ej2.syncfusion.com/angular/demos/#/material3/chart/lazy-loading "Lazy loading in the Angular Charts online demo") and [documentation](https://ej2.syncfusion.com/angular/documentation/chart/working-with-data#lazy-loading "Lazy loading in Angular Charts documentation").

## Conclusion

Thanks for reading! In this blog, we’ve seen how the lazy-loading feature helps us enhance performance and the user experience in the [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts "Angular Charts") component. We appreciate your feedback, which you can leave in the comments section below.

You can download our [free trial](https://www.syncfusion.com/downloads/ "Get free evaluation of the Essential Studio products") if you do not have a Syncfusion license but wish to try the Charts component.

For questions, you can contact us via our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Build an Interactive BPMN Viewer and Editor in Angular](https://www.syncfusion.com/blogs/post/create-bpmn-viewer-using-angular.aspx "Blog: Easily Build an Interactive BPMN Viewer and Editor in Angular")
- [A Full-Stack Web App Using Angular and GraphQL: Part 1](https://www.syncfusion.com/blogs/post/full-stack-web-app-angular-graphql.aspx "Blog: A Full-Stack Web App Using Angular and GraphQL: Part 1")
- [What’s New in Angular Charts: 2023 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-angular-charts.aspx "Blog: What’s New in Angular Charts: 2023 Volume 3")
- [Build Multi-Parent Hierarchical Trees with Angular Diagram Library](https://www.syncfusion.com/blogs/post/angular-multi-parent-hierarchical-tree-diagram.aspx "Blog: Build Multi-Parent Hierarchical Trees with Angular Diagram Library")