Angular

Search results

Axis Customization in Angular Sparkline component

29 Sep 2022 / 5 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]

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='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]

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='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]

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='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);

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]

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='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);

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]

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='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 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]

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='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);

Contents

Change value type of the sparkline
Change min and max values of axis
Change value of axis
Axis line customization

Contents

Change value type of the sparkline
Change min and max values of axis
Change value of axis
Axis line customization