Axis customization in Angular Sparkline component
27 Apr 202416 minutes to read
You can customize axis value types and min and max values of the sparkline.
Change value type of the sparkline
You can change the sparkline value type by setting the [valueType] property to [Numeric], [Category], or [DateTime].
DateTime
You can assign date-time values to the sparkline by setting the [valueType] property to [DateTime].
[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='Column' valueType= 'DateTime' [dataSource]="data" xName="xDate" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ xDate: new Date(2018, 0, 1), x: 0, yval: 4 },
{ xDate: new Date(2018, 0, 2), x: 1, yval: 4.5 },
{ xDate: new Date(2018, 0, 3), x: 2, yval: 8 },
{ xDate: new Date(2018, 0, 4), x: 3, yval: 7 },
{ xDate: new Date(2018, 0, 5), x: 4, yval: 6 },
{ xDate: new Date(2018, 0, 8), x: 5, yval: 8 },
{ xDate: new Date(2018, 0, 9), x: 6, yval: 8 },
{ xDate: new Date(2018, 0, 10), x: 7, yval: 6.5 },
{ xDate: new Date(2018, 0, 11), x: 8, yval: 4 },
{ xDate: new Date(2018, 0, 12), x: 9, yval: 5.5 }
];
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Category
You can assign category values to the sparkline by setting [valueType] to [Category].
[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='Column' valueType='Category' [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 0, xval: 'Robert', yval: 60 },
{ x: 1, xval: 'Andrew', yval: 65 },
{ x: 2, xval: 'Suyama', yval: 70 },
{ x: 3, xval: 'Michael', yval: 80 },
{ x: 4, xval: 'Janet', yval: 55 },
{ x: 5, xval: 'Davolio', yval: 90 },
{ x: 6, xval: 'Fuller', yval: 75 },
{ x: 7, xval: 'Nancy', yval: 85 }
];
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Numeric
You can assign numeric values to the sparkline by setting the [valueType] to [Numeric].
[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='Column' valueType= 'Numeric'[dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 1, xval: 2010, yval: 190 },
{ x: 2, xval: 2011, yval: 165 },
{ x: 3, xval: 2012, yval: 158 },
{ x: 4, xval: 2013, yval: 175 },
{ x: 5, xval: 2014, yval: 200 },
{ x: 6, xval: 2015, yval: 180 },
{ x: 7, xval: 2016, yval: 210 }
];
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Change min and max values of axis
You can change the min and max values of x-axis by setting the [minX] and [maxX] values to the [axisSettings] property. You can also change the min and max values of y-axis by setting the [minY] and [maxY] values to the [axisSettings] property.
[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='Column' valueType= 'Numeric' [axisSettings] = 'axisSettings' [dataSource]="data" xName="x" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
];
public axisSettings: object = {
minY: 0, maxY: 150
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Change value of axis
You can set horizontal axis line value of the sparkline by setting [value] to the [axisSettings] property. The following code example shows this.
[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='Column' valueType= 'Numeric' [axisSettings] = 'axisSettings' [dataSource]="data" xName="xval" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
];
public axisSettings: object = {
value: 25
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Axis line customization
Axis of the sparkline can be collapsed using the [visible] property in [lineSettings]; this is not applicable for win-loss. You can customize the [color], [width], [opacity], and [dashArray] of axis line.
[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='Column' valueType= 'Numeric' [axisSettings] = 'axisSettings' [dataSource]="data" xName="x" yName="yval">
</ejs-sparkline>`
})
export class AppComponent {
public data: object[] = [
{ x: 0, yval: 50 },
{ x: 1, yval: 30 },
{ x: 2, yval: 20 },
{ x: 3, yval: 30 },
{ x: 4, yval: 50 },
{ x: 5, yval: 40 },
{ x: 6, yval: 20 },
{ x: 7, yval: 10 },
{ x: 8, yval: 30 },
{ x: 9, yval: 10 },
{ x: 10, yval: 40 }
];
public axisSettings: object = {
// To configure axis line settings
lineSettings: {
visible: true,
color: "#ff14ae",
dashArray:5
}
};
};import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));