Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Axis Customization in Angular Bullet Chart component

MajorTickLines and MinorTickLines Customization

You can customize the width, color, and size of minor and major tick lines using the majorTickLines and minorTickLines properties of the bullet-chart.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' [majorTickLines] ='majorTickLines' [minorTickLines]='minorTickLines'>
  <e-bullet-range-collection>
    <e-bullet-range end='100' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='200' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='300' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 300;
  public interval: number = 50;
  public data: Object[] = [
      { value: 270, target: 250 }
    ];
  public majorTickLines: Object = { color: 'blue', width: 5 };
  public minorTickLines: Object = { color: 'red', width: 5 };
}
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);

Tick Placement

You can place major and minor ticks inside or outside the ranges using the tickPosition property of bullet-chart.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' tickPosition='Inside'>
  <e-bullet-range-collection>
    <e-bullet-range end='20' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='25' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='30' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 30;
  public interval: number = 5;
  public data: Object[] = [
      { value: 23, target: 22 }
    ];
  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';

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

Label Format

Axis Label Format

Axis numeric labels can be formatted by using the labelFormatproperty. Axis labels support all globalize formats. The following table describes the result of applying some commonly used label formats on numeric axis values.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' labelFormat='c'>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950 }
    ];
  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';

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

The following ‘Table’ describes the result of applying some commonly used ‘Label’ formats on Numeric axis values.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

GroupingSeparator

To separate groups of thousands, use the enableGroupSeparator property of bullet-chart.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' enableGroupSeparator=true>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950 }
    ];
  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';

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

Custom Label Format

You can also customize the axis label format using a placeholder like ${value}K, in which the value represents the axis label, e.g. $20K.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' [labelFormat]='labelFormat'>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950 }
    ];
  public labelFormat: string = '${value}K';
  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';

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

Label Placement

You can customize the axis labels inside or outside the bullet-chart using the labelPosition property.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' labelPosition='Inside'>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950 }
    ];
  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';

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

Opposed Position

To place an axis opposite to its original position, set the opposedPosition property to true.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Revenue' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' opposedPosition=true>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950 }
    ];
  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';

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

Category Label

You can display the x axis label by mapping the categoryField from dataSource of a bullet-chart. It is a more efficient way to understand data.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Profit' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' categoryField='category'>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950, category: 'Product A'  }
    ];
  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';

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

Category Label Customization

You can customize the category label by using the categoryLabelStyle property of the bullet-chart.

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

@Component({
    selector: 'app-container',
    template: `<ejs-bulletchart valueField='value' targetField='target' title='Profit' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data'  [animation]='animation' categoryField='category' [categoryLabelStyle]='categoryLabelStyle'>
  <e-bullet-range-collection>
    <e-bullet-range end='500' color='#ebebeb'></e-bullet-range>
    <e-bullet-range end='1000' color='#d8d8d8'></e-bullet-range>
    <e-bullet-range end='1500' color='#7f7f7f'></e-bullet-range>
  </e-bullet-range-collection>
</ejs-bulletchart>`
})
export class AppComponent {
  public minimum: number = 0;
  public maximum: number = 1500;
  public interval: number = 500;
  public data: Object[] = [
      { value: 1100, target: 950, category: 'Product A'  }
    ];
  public animation: AnimationModel = { enable: false };
  public categoryLabelStyle: Object = { color: 'Orange' };
}
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);
Previous
Next