Run Fast with Large Sets of Data in Ignite UI for JavaScript Charts

Ignite UI for JavaScript Charts can render large data sets with thousands of data points very fast and smoothly.

At the end of this lesson, you will have a chart configured to work with large sets of data in an Angular application. You will see that even with a large amount of data, the chart renders quickly, and zooming in and out of the chart is fluid and responsive.

Learn more about Ignite UI for JavaScript Angular components; you can also learn more about Angular in Angular Essentials, a free eBook published by Infragistics.

Lesson Objectives

  1. Configure an Ignite UI for JavaScript chart to work with the REST API.
  2. Create a chart with a large set of data.

For more information on the controls used in this lesson, see Ignite UI Data Chart.

Setting up the Project

You may download the starter project for this lesson by clicking here. (You can also download the final project by clicking here.)

After downloading the project, navigate to the directory and run the commands below:

  • npm install
  • npm start

Execute the npm install command to install all dependencies, and execute the npm start command to run the Angular application. If the project is set up correctly, you will have a running Angular application as shown in the image below. If you receive an error while running the application, stop and run the npm start command again.

Setting up project with Ignite Grid

Currently, the first chart of the application is configured to work with a small data set. It is rendering a data source with ten rows and functioning smoothly so you can zoom in and zoom out on the chart. Ignite UI for JavaScript charts are created to work with large and small data sets. Whether you are rending 10 data points or 1000 data points, Ignite UI for JavaScript charts will behave in the same smooth, seamless manner to help to run the application faster.

To see it in action, modify the chart to work with a large data set returning from the REST API.

Step 1 Get Data in a Component

Currently, the chart's small data set is configured in the first line of code in the ngOnInit() function. To get a large data set in the PriceChartComponent, you must use AppService in the component. To do so, in the app folder, open the pricechart.component.ts file, navigate to the ngOnInit() function, and (in the function) delete the first line of code and make a call to appService getStcoks() method. Replace only the first line of code as shown below, and leave other codes of ngOnInit() to function as they are.

ngOnInit() {
    stocks => this.stocks = stocks,
    error => this.errorMessage = error);
  this.desiredHeight = 0.22 * (window.screen.height) + "px";
  this.chartOptions = this.getPriceChartOptions();

You are currently fetching data from AppService in the PriceChartComponent. The AppService getStocks() method is fetching data from the REST API, which has more than 200 data points. Essentially, you have reconfigured the chart to work with a large data set.

Step 2 Run the Application

Navigate to the application and you will see that the Ignite UI for JavaScript chart is rendering a large set of more than 200 data points very quickly and smoothly.

Step 2: Run the Application - Render more than 200 data points

When you zoom out to a particular data point, the Ignite UI for JavaScript chart will render in the same way to help the application run faster.

Step 2: Run the Application - Zooming to particular data points


Ignite UI for JavaScript can be very useful for writing faster web applications. In addition to Angular, you can use Ignite UI for JavaScript in React, AngularJS, jQuery, and ASP.NET MVC. Various functionalities of Ignite UI for JavaScript charts, such as zoom in and zoom out, work seamlessly with both small and large data sets.