HelpBot Assistant

How can I help you?

Getting started with Angular Sparkline component

18 Feb 202613 minutes to read

This section explains the steps required to create a simple Angular Sparkline and demonstrates the basic usage of the Sparkline component in an Angular environment.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion^® Angular UI Components.

Setup Angular environment

A straightforward approach to begin with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, a CSS-based application is created. Use SCSS if required:

ng new syncfusion-angular-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

Navigate to your newly created application directory:

cd syncfusion-angular-app

Note: In Angular 19 and below, the CLI generates files like app.component.ts, app.component.html, app.component.css, etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding Syncfusion Sparkline package

Syncfusion^®’s Angular component packages are available on npmjs.com. To use Syncfusion^® Angular components, install the necessary package.

This guide uses the Angular Sparkline component for demonstration. Add the Angular Sparkline component with:

ng add @syncfusion/ej2-angular-charts

The above command will perform the following configurations:

Add the @syncfusion/ej2-angular-charts package and peer dependencies to your package.json.
Import the Sparkline component in your application.

For more details on version compatibility, refer to the Version Compatibility section.

Syncfusion^® offers two package structures for Angular components:

Ivy library distribution package format
Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.

Ivy library distribution package

Syncfusion^®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:

ng add @syncfusion/ej2-angular-charts

Angular compatibility compiled package(ngcc)

For applications not compiled with Ivy, use the ngcc tagged packages:

The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of Ivy compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.

npm add @syncfusion/[email protected]

Add Sparkline component

Modify the app.component.ts file to render the Sparkline component (ejs-sparkline). Ensure the component selector used in index.html matches the selector value defined in the component (for example <app-container> when selector: 'app-container').

import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    imports: [SparklineModule],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the Sparkline component
    template: `<ejs-sparkline id='sparkline-container'></ejs-sparkline>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Use the component selector defined in app.component.ts (for example <app-container>) in index.html so the root component mounts correctly.

<app-container></app-container>

Run the development server. Use ng serve for the Angular dev server. Alternatively, npm start works if a start script is configured in package.json.

npm start

The below example shows a basic Sparkline.

import { SparklineModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
    imports: [SparklineModule],
    standalone: true,
    selector: 'app-container',
    // specifies the template string for the Sparkline component
    template: `<ejs-sparkline id='sparkline-container'></ejs-sparkline>`
})
export class AppComponent  { }

Because no dataSource is specified, the Sparkline renders an empty SVG element. To render a Sparkline provide a dataSource (an array of numbers or an array of objects) and map fields using xName and yName. For example, when using an array of objects such as { x: 'Jan', y: 10 }, set xName='x' and yName='y'.

Module injection

Sparkline features are provided by optional services. To enable a feature, register its service either in the application module providers (module-based applications) or in a standalone component’s providers array. Relevant services include:

SparklineTooltipService - Inject this provider to enable tooltip support for the Sparkline.

The following examples demonstrate enabling tooltip support and other feature services. Import SparklineTooltipService from @syncfusion/ej2-angular-charts and provide it according to the application architecture (module providers or component providers).

    import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts'
    import { Component } from '@angular/core';

    @Component({
      imports: [SparklineModule],
      standalone: true,
      providers: [ SparklineTooltipService ]
    })

Bind data source to Sparkline

The dataSource property binds data to the Sparkline. This property accepts an array of primitive values or an array of objects. For object arrays, set xName and yName to map object fields to the Sparkline’s X and Y values. Example data shape: { x: 'Jan', y: 10 } with xName='x' and yName='y'.

[app.component.ts]

app.component.ts
main.ts
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';
import { Component } from '@angular/core';

@Component({
    imports: [SparklineModule],
    providers: [SparklineTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-sparkline id='container' width='400px' height='350px' [dataSource]="data" xName="xval" yName="yval" type="Line">
    </ejs-sparkline>`
})
export class AppComponent {
    public data: object[] = [
        { xval: 1, yval: 20090440 },
        { xval: 2, yval: 20264080 },
        { xval: 3, yval: 20434180 },
        { xval: 4, yval: 21007310 },
        { xval: 5, yval: 21262640 },
        { xval: 6, yval: 21515750 },
        { xval: 7, yval: 21766710 },
        { xval: 8, yval: 22015580 },
        { xval: 9, yval: 22262500 },
        { xval: 10, yval: 22507620 }
    ];
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change the type of Sparkline

We can change the Sparkline types by setting the type property as [Line], [Column], [WinLoss], [Pie], [Area]. Here, we have given the Sparkline type as [Area].

[app.component.ts]

app.component.ts
main.ts
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';
import { Component } from '@angular/core';

@Component({
    imports: [SparklineModule],
    providers: [SparklineTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-sparkline id='container' width='400px' height='350px' [dataSource]="data" xName="xval" yName="yval" type="Area">
    </ejs-sparkline>`
})
export class AppComponent {
    public data: object[] = [
        { xval: 1, yval: 20090440 },
        { xval: 2, yval: 20264080 },
        { xval: 3, yval: 20434180 },
        { xval: 4, yval: 21007310 },
        { xval: 5, yval: 21262640 },
        { xval: 6, yval: 21515750 },
        { xval: 7, yval: 21766710 },
        { xval: 8, yval: 22015580 },
        { xval: 9, yval: 22262500 },
        { xval: 10, yval: 22507620 }
    ];
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Sparkline displays the sparkline details through tooltip, when the mouse is moved over the sparkline. You can enable tooltip by setting the visible property as true in tooltipSettings object and by injecting SparklineTooltipService into the component’s providers array.

[app.component.ts]

app.component.ts
main.ts
import { SparklineModule, SparklineTooltipService, SparklineTooltipSettingsModel } from '@syncfusion/ej2-angular-charts';
import { Component } from '@angular/core';

@Component({
    imports: [SparklineModule],
    providers: [SparklineTooltipService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-sparkline id='container' width='400px' height='350px' [dataSource]="data" xName="xval" yName="yval" type="Area"
    [tooltipSettings]="tooltipSettings">
    </ejs-sparkline>`
})
export class AppComponent {
    public data: object[] = [
        { xval: 1, yval: 20090440 },
        { xval: 2, yval: 20264080 },
        { xval: 3, yval: 20434180 },
        { xval: 4, yval: 21007310 },
        { xval: 5, yval: 21262640 },
        { xval: 6, yval: 21515750 },
        { xval: 7, yval: 21766710 },
        { xval: 8, yval: 22015580 },
        { xval: 9, yval: 22262500 },
        { xval: 10, yval: 22507620 }
    ];
    public tooltipSettings: SparklineTooltipSettingsModel = {
        visible: true,
        format: '${xval} : ${yval}'
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask HelpBot

Search docs

Ask HelpBot

How can I help you?

Getting started with Angular Sparkline component

Prerequisites

Setup Angular environment

Installing a specific version

Create an Angular application

Adding Syncfusion Sparkline package

Ivy library distribution package

Angular compatibility compiled package(ngcc)

Add Sparkline component

Module injection

Bind data source to Sparkline

Change the type of Sparkline

Enable tooltip for Sparkline