Search results

Dimensions in Angular Bullet Chart component

26 Nov 2021 / 3 minutes to read

Size for Container

The size of the Bullet Chart is determined by the container size, and it can be changed inline or via CSS as following.

Copied to clipboard
    <div style="width:650px; height:350px;">
        <ejs-bulletchart id="app-container"></ejs-bulletchart>
    </div>
Copied to clipboard
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-container',
    template:
    `<div style="width:650px; height:350px;">
        <ejs-bulletchart id="app-container"></ejs-bulletchart>
    </div>`
})
export class AppComponent {
    constructor(){
        /*
        */
    }
}
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 valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' width='650px' height='350px'>
  <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 };
}
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);

Size for Bullet Chart

The width and height properties are used to adjust the size of the Bullet Chart.

Pixel

Can set the size of the Bullet Chart in pixels as shown below.

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 valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' width='650' height='350'>
  <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 };
}
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);

Percentage

By setting a value in percentage, the Bullet Chart gets its dimension with respect to its container. For example, when the height is 50%, the Bullet Chart renders to half of the container’s height.

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 valueField='value' targetField='target' [minimum]='minimum' [maximum]='maximum'
  [interval]='interval' [dataSource]='data' [animation]='animation' width='70%' height='60%'>
  <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 };
}
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);

If the size is not specified, the Bullet Chart will be rendered with a height of 126px and a width of the window.