Search results

Data Labels in Angular Bullet Chart component

21 Oct 2021 / 2 minutes to read

Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the dataLabel setting’s enable property to true.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart id='localData' valueField='completedStories' targetField='requiredStories'
category='name' height='400px' [minimum]='minimum' [maximum]='maximum' [interval]='interval'
title='Sprint Planning' titlePosition='Top' [dataSource]='data' [animation]='animation' [dataLabel]='dataLabel'>
<e-bullet-range-collection>
    <e-bullet-range end='25' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='37' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='45' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
    public minimum: number = 5;
    public maximum: number = 45;
    public interval: number = 5;
    public animation: AnimationModel = { enable: false };
    public dataLabel: Object = { enable: true };
    public data: Object[] = [
        {
            requiredStories: 20,
            completedStories: 25,
            name: 'David'
        },
        {
            requiredStories: 25,
            completedStories: 20,
            name: 'Asif'
        },
        {
            requiredStories: 15,
            completedStories: 10,
            name: 'Thomas'
        },
        {
            requiredStories: 40,
            completedStories: 39,
            name: 'Rohit'
        },
        {
            requiredStories: 35,
            completedStories: 40,
            name: 'Virat'
        },
        {
            requiredStories: 28,
            completedStories: 25,
            name: 'Jude'
        },
        {
            requiredStories: 10,
            completedStories: 18,
            name: 'Warner'
        },
        {
            requiredStories: 30,
            completedStories: 28,
            name: 'Malik'
        }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BulletChartModule} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, BulletChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Data Label Customization

Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the labelStyle.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart id='localData' valueField='completedStories' targetField='requiredStories'
category='name' height='400px' [minimum]='minimum' [maximum]='maximum' [interval]='interval'
title='Sprint Planning' titlePosition='Top' [dataSource]='data' [animation]='animation' [dataLabel]='dataLabel'>
<e-bullet-range-collection>
    <e-bullet-range end='25' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='37' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='45' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
    public minimum: number = 5;
    public maximum: number = 45;
    public interval: number = 5;
    public animation: AnimationModel = { enable: false };
    public dataLabel: Object = { enable: true, labelStyle:{ color: 'yellow', size: '20'} };
    public data: Object[] = [
        {
            requiredStories: 20,
            completedStories: 25,
            name: 'David'
        },
        {
            requiredStories: 25,
            completedStories: 20,
            name: 'Asif'
        },
        {
            requiredStories: 15,
            completedStories: 10,
            name: 'Thomas'
        },
        {
            requiredStories: 40,
            completedStories: 39,
            name: 'Rohit'
        },
        {
            requiredStories: 35,
            completedStories: 40,
            name: 'Virat'
        },
        {
            requiredStories: 28,
            completedStories: 25,
            name: 'Jude'
        },
        {
            requiredStories: 10,
            completedStories: 18,
            name: 'Warner'
        },
        {
            requiredStories: 30,
            completedStories: 28,
            name: 'Malik'
        }
    ];
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BulletChartModule} from '@syncfusion/ej2-angular-charts';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, BulletChartModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [ ]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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