Angular

Search results

Sparkline Types in Angular Sparkline component

26 Sep 2022 / 5 minutes to read

Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:

Line
Column
Win-Loss
Pie
Area

The following code sample shows different types of sparkline.

Line

The [Line] type is used to render the sparkline series as line.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="Line" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Column

The [Column] type is used to render the sparkline series as column.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="Column" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Pie

The [Pie] type is used to render the sparkline series as pie.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="Pie" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Pie

The [Pie] type is used to render the sparkline series as pie.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="Pie" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Win Loss

The [WinLoss] type is used to render the sparkline series as Win Loss.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="WinLoss" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Area

The [Area] type is used to render the sparkline series as area.

[app.component.ts]

Source

Preview

app.component.ts

app.module.ts

main.ts

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

@Component({
selector: 'app-container',
template: `<ejs-sparkline id='container' width='70%' height='100px' type="Area" [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: 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 },
];
};

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SparklineModule, SparklineTooltipService } from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, SparklineModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
	providers: [SparklineTooltipService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);