Customization in Angular Bullet chart component
27 Sep 20238 minutes to read
Orientation
The Bullet Chart can be rendered in different orientations such as Horizontal or Vertical via the orientation
property. By default, the Bullet Chart is rendered in the Horizontal orientation.
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';
@Component({
selector: 'app-container',
template: `<ejs-bulletchart targetField='target' valueField='value' [minimum]='minimum' [maximum]='maximum'
[interval]='interval' [dataSource]='data' [animation]='animation' title='Sales Rate in dollars'
subtitle='(in dollars $)' width='25%' orientation='Vertical'>
<e-bullet-range-collection>
<e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
<e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
<e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
public minimum: number = 0;
public maximum: number = 100;
public interval: number = 20;
public data: Object[] = [
{ value: 55, target: 75 }
];
public animation: AnimationModel = { enable: false };
}
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Right-to-left (RTL)
The Bullet Chart supports the right-to-left rendering that can be enabled by setting the enableRtl
property to true.
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';
@Component({
selector: 'app-container',
template: `<ejs-bulletchart targetField='target' valueField='value' [minimum]='minimum' [maximum]='maximum'
[interval]='interval' [dataSource]='data' [animation]='animation' title='Sales Rate in dollars'
subtitle='(in dollars $)' enableRtl=true>
<e-bullet-range-collection>
<e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
<e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
<e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
public minimum: number = 0;
public maximum: number = 100;
public interval: number = 20;
public data: Object[] = [
{ value: 55, target: 75 }
];
public animation: AnimationModel = { enable: false };
}
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Animation
The actual and the target bar supports the linear animation via the animation
setting. The speed and the delay are controlled using the duration
and delay
properties respectively.
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';
@Component({
selector: 'app-container',
template: `<ejs-bulletchart valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
[interval]='interval' [dataSource]='data' [animation]='animation'>
<e-bullet-range-collection>
<e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
<e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
<e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
public minimum: number = 0;
public maximum: number = 100;
public interval: number = 20;
public data: Object[] = [
{ value: 55, target: 75 }
];
public animation: AnimationModel = { enable: true };
}
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Theme
The Bullet Chart supports different type of themes via the theme
property.
import { Component } from '@angular/core';
import { AnimationModel } from '@syncfusion/ej2-charts';
@Component({
selector: 'app-container',
template: `<ejs-bulletchart targetField='target' valueField='value' [minimum]='minimum' [maximum]='maximum'
[interval]='interval' [dataSource]='data' [animation]='animation' title='Sales Rate in dollars'
subtitle='(in dollars $)' theme='HighContrast'>
<e-bullet-range-collection>
<e-bullet-range end='35' color='#ebebeb'></e-bullet-range>
<e-bullet-range end='70' color='#d8d8d8'></e-bullet-range>
<e-bullet-range end='100' color='#7f7f7f'></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
public minimum: number = 0;
public maximum: number = 100;
public interval: number = 20;
public data: Object[] = [
{ value: 55, target: 75 }
];
public animation: AnimationModel = { enable: false };
}
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);