Angular UI Components Documentation

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}

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';
    }   
}
                                
                            

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';
    }   
}
                                
                            

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';
    }   
}
                                
                            

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';
    }   
}
                                
                            

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';
    }   
}
                                
                            

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';
    }   
}
                                
                            

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';
    }   
}
							
                            

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';
    }   
}
							
                            

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';
    }   
}