Search results

Ranges in Angular Bullet Chart component

25 Oct 2021 / 2 minutes to read

Ranges represent the quality of a specific range such as Good, Bad and Satisfactory in the Bullet Chart scale. The ending point of a qualitative range is specified in the end property in ranges. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point.

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 targetField='target' valueField='value' categoryField='category' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' height='400' [categoryLabelStyle]='categoryLabelStyle'
title='Sales Rate'>
  <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, category: 'Year 1'  },
    { value: 70, target: 70, category: 'Year 2'  },
    { value: 85, target: 75, category: 'Year 3'  }
    ];
  public animation: AnimationModel = { enable: false };
  public categoryLabelStyle: Object = { color: 'red', size: '13', fontWeight: 'bold'};
}
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);

Color Customization

Enhance the readability of ranges with color and opacity. It can be applied using the color and opacity properties in ranges.

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 targetField='target' valueField='value' categoryField='category' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' height='400' [categoryLabelStyle]='categoryLabelStyle'
title='Sales Rate'>
  <e-bullet-range-collection>
    <e-bullet-range end='35' color='darkred'></e-bullet-range>
    <e-bullet-range end='50' color='red'></e-bullet-range>
    <e-bullet-range end='75' color='blue'></e-bullet-range>
    <e-bullet-range end='90' color='lightgreen'></e-bullet-range>
    <e-bullet-range end='100' color='green'></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, category: 'Year 1'  },
    { value: 70, target: 70, category: 'Year 2'  },
    { value: 85, target: 75, category: 'Year 3'  }
    ];
  public animation: AnimationModel = { enable: false };
  public categoryLabelStyle: Object = { color: 'red', size: '13', fontWeight: 'bold'};
}
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);