You can customize axis value types and min and max values 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 { Component } from '@angular/core';
@Component({
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 { 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);
Category
You can assign category values to the sparkline by setting [valueType
] to [Category
].
[app.component.ts
]
import { Component } from '@angular/core';
@Component({
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 { 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);
Numeric
You can assign numeric values to the sparkline by setting the [valueType
] to [Numeric
].
[app.component.ts
]
import { Component } from '@angular/core';
@Component({
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 { 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);
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 { Component } from '@angular/core';
@Component({
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 { 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);
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 { Component } from '@angular/core';
@Component({
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 { 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);
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 { Component } from '@angular/core';
@Component({
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 { 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);