Data label in Angular Bullet chart component
17 Jun 20239 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.
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'
}
];
}
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 { }
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
.
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'
}
];
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);