How to get started easily with Syncfusion Angular 11 Sparkline Charts?

This article explains how to easily integrate Syncfusion Angular Sparkline in an Angular 11 application and how to enable its commonly used features using services. The Essential JS 2 Sparkline is used to present the general shape of variation in some measurement in a simple and highly condensed way. It is a very small line chart, typically drawn without axes or co-ordinates. Its type includes line, area, WinLoss, and column. 

Prerequisites

Before starting, you need the following items to create Angular Sparkline in an Angular 11 Application:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular CLI using the following command.

npm install @angular/cli@11.2.3

2. Create an Angular 11 application using Angular CLI.

ng new angular11-app

cd angular-app

3. Serve the Angular 11 application using the following command.

ng serve --open

Listen to the application in localhost:4200. Your application will served in browser. Refer to the following screenshot for Angular 11 version.

Integration of Angular Sparkline Charts

4. After running the Angular 11 application successfully, configure the Angular Sparkline Charts in this application. Install Angular Sparkline Charts and the EJ2 package using the following command.

   npm install @syncfusion/ej2-angular-charts --save
   
   npm install @syncfusion/ej2 --save
   
   

The --save command instructs NPM to include the Sparkline Charts package inside the dependencies section of the package.json.

5. Import SparklinechartsModule from the installed package in app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';

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

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

import { AppComponent } from './app.component';

 

@NgModule({

  declarations: [

    AppComponent

  ],

imports: [

    BrowserModule,

    SparklineModule

  ],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

6. Refer the CSS file for Angular Sparkline Charts in style.css.

Import “../node_modules/@syncfusion/ej2/material.css”

7. Add the Angular Sparkline component in app.component.html.

<ejs-sparkline></ejs-sparkline>

8. Now, add the data source for Sparkline Charts in app.component.ts.

public pausData: object[] = [

    { x: 0, xval: '2005', yval: 20090440 },

    { x: 1, xval: '2006', yval: 20264080 },

    { x: 2, xval: '2007', yval: 20434180 },

    { x: 3, xval: '2008', yval: 21007310 },

    { x: 4, xval: '2009', yval: 21262640 },

    { x: 5, xval: '2010', yval: 21515750 },

    { x: 6, xval: '2011', yval: 21766710 },

    { x: 7, xval: '2012', yval: 22015580 },

    { x: 8, xval: '2013', yval: 22262500 },

    { x: 9, xval: '2014', yval: 22507620 },

];

 

9. After adding the data source, define the Sparkline Charts in app.component.html.

<ejs-sparkline id="paus" height="50px" width="150px" lineWidth=2         valueType="Category" fill="#3C78EF" negativePointColor="red" [dataSource]="pausData"  xName="xval" yName="yval" format='n' useGroupingSeparator="true">

</ejs-sparkline>

<ejs-sparkline id="aaus" height="50px" width="150px" lineWidth=2 v       valueType="Category" fill="#3C78EF"

type="Area" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval">

</ejs-sparkline>

<ejs-sparkline id="waus" height="50px" width="150px" lineWidth=2 valueType="Category" fill="#3C78EF" type="WinLoss" negativePointColor="red" [dataSource]="pausData"  xName="xval" yName="yval">

</ejs-sparkline>

 

<ejs-sparkline id="caus" height="50px" width="150px" lineWidth=2 valueType="Category" fill="#3C78EF"  type="Column" [axisSettings]="minAus" negativePointColor="red" [dataSource]="pausData" xName="xval" yName="yval"></ejs-sparkline>

10. Now, serve the application using the following command.

ng serve --open

After all the files have been compiled successfully, it will serve the site at localhost:4200.

The following screenshot illustrates Sparkline Charts:

Conclusion

We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 Sparkline chart .

You can refer to our Angular Sparkline chart page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Sparkline chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!