How to get started easily with Syncfusion Angular7 Sparkline Charts?

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. This KB article explains how to easily integrate Syncfusion Angular Sparkline in an Angular 7 application and how to enable its commonly used features using services.

Prerequisites

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

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor

Installation and application creation

1. Install Angular CLI using the following command.

2. Create an Angular 7 application using Angular CLI.

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

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

Integration of Angular Sparkline Charts

4. After running the Angular 7 application successfully, configure the Angular Sparkline Charts in this application. Install Angular Sparkline Charts and EJ2 package using the following command. 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.

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

The following screenshot illustrates Sparkline Charts.

Summary

To know more about Sparkline Charts, check our Angular Sparkline Charts features from this page. If you have any queries or require clarifications. Please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!