Properties

NameTypeDefault
animationDuration Number 1000

Sets or gets the animationDuration property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [animationDuration]="500">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
backgroundColor String #e0e0e0

Sets or gets the backgroundColor property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [backgroundColor]="'red'">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
barSpacing Number 4

Sets or gets the barSpacing property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [barSpacing]="12">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
baseValue Number null

Sets or gets the baseValue property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [baseValue]="30">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
colorScheme String scheme01

Sets or gets the colorScheme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [colorScheme]="'scheme02'">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
customColorScheme BarGaugeCustomColorScheme scheme01
interface BarGaugeCustomColorScheme {
     name: String;
     colors: Array<String>;
}

Sets or gets the customColorScheme property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [colorScheme]="colorScheme" [customColorScheme]='{"name":"colorScheme","colors":["#FFCF5E","#E83C64","#FF60B9","#52BDE8"]}'
>
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [disabled]="true">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
endAngle Number 0

Sets or gets the endAngle property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [endAngle]="180">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
formatFunction (value: Number, index: Number, color: String): Any null

Sets or gets the formatFunction property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [formatFunction]="formatFunction">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
height Size 400
interface Size {
     size?: String | Number;
}

Sets or gets the height property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
labels BarGaugeLabels null
interface BarGaugeLabels {
     connectorColor?: String;
     connectorWidth?: Number;
     font?: BarGaugeLabelsFont;
     formatFunction?: (value?: Number, index?: Number) => String;
     indent?: Number;
     precision?: Number;
     visible?: Boolean;
}
interface BarGaugeLabelsFont {
     color?: String;
     size?: Number | String;
     family?: String;
}

Sets or gets the labels property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [labels]="labels">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
max Number | String 100

Sets or gets the max property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="60">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
min Number 0

Sets or gets the min property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [min]="-25">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
relativeInnerRadius Number | String 0.3

Sets or gets the relativeInnerRadius property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [relativeInnerRadius]="0">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
rendered () => Void null

Sets or gets the rendered property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [rendered]="rendered">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
startAngle Number 225

Sets or gets the startAngle property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [startAngle]="200">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
title BarGaugeTitle null
interface BarGaugeTitle {
     text?: String;
     font?: BarGaugeTextFont;
     horizontalAlignment?: BarGaugeHorizontalTitleAlignment;
     margin?: BarGaugeTitleMargin;
     subtitle?: BarGaugeTitleSubtitle;
     verticalAlignment?: BarGaugeVerticalTitleAlignment;
}
interface BarGaugeTextFont {
     color?: String;
     family?: String;
     opacity?: Number;
     size?: Number | String;
     weight?: Number;
}
enum BarGaugeHorizontalTitleAlignment {
     left,
     center,
     right
}
interface BarGaugeTitleMargin {
     bottom?: Number;
     left?: Number;
     right?: Number;
     top?: Number;
}
enum BarGaugeVerticalTitleAlignment {
     top,
     bottom
}
interface BarGaugeTitleSubtitle {
     text?: String;
     font?: BarGaugeTextFont;
}

Sets or gets the title property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [title]="title">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
tooltip BarGaugeTooltip null
interface BarGaugeTooltip {
     classname?: String;
     formatFunction?: (value?: Any, index?: Number) => String;
     visible?: Boolean;
     precision?: Number;
}

Sets or gets the tooltip property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [tooltip]="tooltip">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
useGradient Boolean true

Sets or gets the useGradient property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150" [useGradient]="false">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
values Array<Number> []

Sets or gets the values property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}
width Size 400
interface Size {
     size?: String | Number;
}

Sets or gets the width property.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

Events

drawEnd Event

The event is raised when the BarGauge finish rendering. Commonly used in combination with drawStart event.

Code examples

Bind to the drawEnd event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onDrawEnd)="DrawEnd($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
DrawEnd(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

drawStart Event

The event is raised when the BarGauge starts rendering again. Commonly used in combination with drawEnd event.

Code examples

Bind to the drawStart event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onDrawStart)="DrawStart($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
DrawStart(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

initialized Event

Fires when the jqxBarGauge is rendered for the first time. The BarGauge is initialized.

Code examples

Bind to the initialized event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onInitialized)="Initialized($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
Initialized(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

tooltipClose Event

Fires when a BarGauge's tooltip is closed.

Code examples

Bind to the tooltipClose event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onTooltipClose)="TooltipClose($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
TooltipClose(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

tooltipOpen Event

Fires when a BarGauge's tooltip is open.

Code examples

Bind to the tooltipOpen event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onTooltipOpen)="TooltipOpen($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
TooltipOpen(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

valueChanged Event

Fires after the values are changed.

Code examples

Bind to the valueChanged event of jqxBarGauge.

import { Component } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge (onValueChanged)="ValueChanged($event)"
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent {
ValueChanged(event: any): void
{
// Do Something
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

Methods

NameReturn TypeArguments
refresh Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myBarGauge') myBarGauge: jqxBarGaugeComponent;
ngAfterViewInit(): void
{
this.myBarGauge.refresh();
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

render Void None
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myBarGauge') myBarGauge: jqxBarGaugeComponent;
ngAfterViewInit(): void
{
this.myBarGauge.render();
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}

val Array<Number> value: Array<Number>
import { Component, ViewChild, AfterViewInit } from "@angular/core";
@Component({
selector: "app-root",
template: `
<jqxBarGauge #myBarGauge
[values]="values" [width]="600" [height]="600" [max]="150">
</jqxBarGauge>
`
})
export class AppComponent implements AfterViewInit {
@ViewChild('myBarGauge') myBarGauge: jqxBarGaugeComponent;
ngAfterViewInit(): void
{
let value = this.myBarGauge.val([112, 125, 150, 137]);
}

title: string = 'Ranking';
values: number[] = [102, 115, 130, 137];
labels: jqwidgets.BarGaugeLabels =
{
connectorColor: 'green',
connectorWidth: 1
};
tooltip: jqwidgets.BarGaugeTooltip =
{
formatFunction: (value: any, index: number): string => {
return `${value} $`;
},
visible: true,
precision: 0
};
rendered = (): void =>
{
// Do Something
};
formatFunction(value: number, index: number, color: string): string {
return 'red';
}
}