Special points customization in Angular Sparkline component
27 Apr 20244 minutes to read
You can customize the points by initializing the point colors. The customization options allows to differentiate the [start
], [end
], [positive
], [negative
], and [low
] points. This customization is only applicable for line, column, and area type sparkline.
[app.component.ts
]
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
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='130px' height='150px' endPointColor='green' negativePointColor='red' startPointColor='green' lowPointColor='orange' highPointColor='blue' valueType= 'Category' type='Column' [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 0, xval: 'AUDI', yval: 1 },
{ x: 1, xval: 'BMW', yval: 5 },
{ x: 2, xval: 'BUICK', yval: -1 },
{ x: 3, xval: 'CETROEN', yval: -6 },
{ x: 4, xval: 'CHEVROLET', yval: 0 },
{ x: 5, xval: 'FIAT', yval: 1 },
{ x: 6, xval: 'FORD', yval: -2 },
{ x: 7, xval: 'HONDA', yval: 7 },
{ x: 8, xval: 'HYUNDAI', yval: -9 },
{ x: 9, xval: 'JEEP', yval: 0 },
{ x: 10, xval: 'KIA', yval: -10 },
{ x: 11, xval: 'MAZDA', yval: 3 }
];
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Tie point color
Tie point color is used to configure the win-loss series type sparkline’s y-value point color. The following code sample shows the tie point color of sparkline series.
[app.component.ts
]
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
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='130px' height='150px' type='WinLoss' valueType= 'Numeric' tiePointColor='blue' [dataSource]="data" >
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10
] as any;
};
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));