AngularBulletChart API Reference

Name	Type	Default
animationDuration	Number	null
Sets or gets the `animationDuration` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [animationDuration]="500" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
barSize	Size	50%
Sets or gets the `barSize` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [barSize]="40%"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
description	String	'Description'
Sets or gets the `description` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [description]="'Description'" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
disabled	Boolean	false
Sets or gets the `disabled` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [disabled]="true"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
height	Size	100
Sets or gets the `height` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
labelsFormat	enum:BulletChartLabelsFormat	null
enum BulletChartLabelsFormat { null, d, f, n, c, p } Sets or gets the `labelsFormat` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormat]="'c'" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
labelsFormatFunction	(value?: Number, position?:String ) => Any	null
Sets or gets the `labelsFormatFunction` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [labelsFormatFunction]="labelsFormatFunction" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
orientation	enum:BulletChartOrientation	"horizontal"
enum BulletChartOrientation { horizontal, vertical } Sets or gets the `orientation` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [orientation]="'horizontal'" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
pointer	BulletChartPointer	{ value: 65, label: "Value", size: "25%", color: "" }
interface BulletChartPointer { value?: Number; label?: String; size?: Size; color?: String; } Sets or gets the `pointer` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
rtl	Boolean	false
Sets or gets the `rtl` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [rtl]="true"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
ranges	Array<BulletChartRanges>	[{ startValue: 0, endValue: 50, color: "#000000", opacity: 0.7 }, { startValue: 50, endValue: 80, color: "#000000", opacity: 0.5 }, { startValue: 80, endValue: 100, color: "#000000", opacity: 0.3}]
interface BulletChartRanges { startValue: Number; endValue: Number; opacity?: Number; color?: String; } Sets or gets the `ranges` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
showTooltip	Boolean	true
Sets or gets the `showTooltip` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [showTooltip]="false" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
target	BulletChartPointer	{ value: 85, label: "Target", size: 4, color: "" };
interface BulletChartPointer { value?: Number; label?: String; size?: Size; color?: String; } Sets or gets the `target` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
ticks	BulletChartTicks	{ position: "far", interval: 20, size: 10 }
interface BulletChartTicks { position?: BulletChartTicksPosition; interval?: Number; size?: Number \| String; } Sets or gets the `ticks` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
title	String	'Title'
Sets or gets the `title` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [title]="'Title'"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
tooltipFormatFunction	(pointerValue:Number , targetValue:Number) => String	null
Sets or gets the `tooltipFormatFunction` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target" [tooltipFormatFunction]="tooltipFormatFunction" > </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
width	Size	500
Sets or gets the `width` property. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
Events
change	Event
This event is triggered when the value is changed. Code examples Bind to the `change` event of jqxBulletChart. import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart (onChange)="Change($event)" [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent { Change(event: any): void { // Do Something } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
Methods
Name	Return Type	Arguments
destroy	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.destroy(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
render	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.render(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
refresh	Void	None
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { this.myBulletChart.refresh(); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }
val	Number	value: Number
import { Component, ViewChild, AfterViewInit } from "@angular/core"; @Component({ selector: "app-root", template: ` <jqxBulletChart #myBulletChart [width]="500" [height]="80" [pointer]="pointer" [ticks]="ticks" [ranges]="ranges" [target]="target"> </jqxBulletChart> ` }) export class AppComponent implements AfterViewInit { @ViewChild('myBulletChart') myBulletChart: jqxBulletChartComponent; ngAfterViewInit(): void { let value = this.myBulletChart.val(50); } title: string = 'Revenue 2014 YTD'; description: string = '(U.S. $ in thousands)'; ranges: any[] = [ { startValue: 0, endValue: 200, color: '#000000', opacity: 0.5 }, { startValue: 200, endValue: 250, color: '#000000', opacity: 0.3 }, { startValue: 250, endValue: 300, color: '#000000', opacity: 0.1 } ]; pointer: any = { value: 270, label: 'Revenue 2014 YTD', size: '25%', color: 'Black'}; target: any = { value: 260, label: 'Revenue 2013 YTD', size: 4, color: 'Black' }; ticks: any = { position: 'both', interval: 50, size: 10 }; }

Properties

Events

Code examples

Methods