Properties

NameTypeDefault
animationDuration String | Number 400

Sets or gets the animationDuration property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
border GaugeBorder { size: '10%', style: { stroke: '#cccccc'}, visible: true, showGradient: true }
interface GaugeBorder {
     size?: String | Number;
     visible?: Boolean;
     style?: GaugeStyle;
     showGradient?: Boolean;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the border property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [border]="border">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
caption GaugeCaption { value: '', position: 'bottom', offset: [0, 0], visible: true }
interface GaugeCaption {
     value?: String;
     position?: GaugePosition;
     offset?: Array<Number>;
     visible?: Boolean;
}

Sets or gets the caption property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [caption]="caption">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
cap GaugeCap { size: '4%', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' } , visible: true }
interface GaugeCap {
     size?: String | Number;
     visible?: Boolean;
     style?: GaugeStyle;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the cap property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [cap]="cap">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
colorScheme String 'scheme01'

Sets or gets the colorScheme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [colorScheme]="'scheme01'">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
disabled Boolean false

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [disabled]="true">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
easing enum:GaugeEasing linear
enum GaugeEasing {
     linear,
     easeOutBack,
     easeInQuad,
     easeInOutCirc,
     easeInOutSine,
     easeOutCubic
}

Sets or gets the easing property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [easing]="'linear'">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
endAngle String | Number 270

Sets or gets the endAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [endAngle]="250">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
height String | Number 350

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [height]="400">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
int64 Boolean false

Sets or gets the int64 property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [int64]="true">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
labels GaugeLabels { distance: '38%', position: 'none', interval: 20, offset: [0, -10], visible: true, formatValue: function (value) { return value; }}
interface GaugeLabels {
     distance?: String;
     position?: GaugeLabelsPosition;
     interval?: String | Number;
     offset?: Array<Number>;
     visible?: Boolean;
     formatValue?: (value?: Number) => String;
}

Sets or gets the labels property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [labels]="labels">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
min Number 0

Sets or gets the min property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [min]="10">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
max String | Number 220

Sets or gets the max property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [max]="210">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
pointer GaugePointer { pointerType: 'default', style: { fill: 'theme-specific-color', stroke: 'theme-specific-color' }, length: '70%', width: '2%', visible: true }
interface GaugePointer {
     pointerType?: String;
     style?: GaugeStyle;
     width?: String | Number;
     length?: String | Number;
     visible?: Boolean;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the pointer property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [pointer]="pointer">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
radius String | Number '50%'

Sets or gets the radius property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [radius]="150">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
ranges Array<GaugeRanges> []
interface GaugeRanges {
     startValue: String | Number;
     endValue: String | Number;
     startWidth: String | Number;
     endWidth: String | Number;
     startDistance?: String | Number;
     endDistance?: String | Number;
     style: GaugeStyle;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the ranges property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [ranges]="ranges">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
startAngle String | Number 30

Sets or gets the startAngle property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [startAngle]="40" [endAngle]="200">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
showRanges Boolean true

Sets or gets the showRanges property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [showRanges]="true">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
style GaugeStyle { fill: '#ffffff', stroke: '#ffffff' }
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the style property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [style]="style">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
ticksMajor GaugeTicks { size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
interface GaugeTicks {
     size: String | Number;
     interval: String | Number;
     visible?: Boolean;
     style?: GaugeStyle;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the ticksMajor property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [ticksMajor]="ticksMajor">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
ticksMinor GaugeTicks { size: '10%', interval: 5, style: { stroke: '#898989'}, visible: true }
interface GaugeTicks {
     size: String | Number;
     interval: String | Number;
     visible?: Boolean;
     style?: GaugeStyle;
}
interface GaugeStyle {
     fill?: String;
     stroke?: String;
}

Sets or gets the ticksMinor property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [ticksMinor]="ticksMinor">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
ticksDistance String | Number '20%"

Sets or gets the ticksDistance property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [ticksDistance]="50%">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
value Number 0

Sets or gets the value property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [value]="100">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
width String | Number 350

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200" [width]="300">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}

Events

valueChanging Event

The event is is triggered when the gauge's value is changing.

Code examples

Bind to the valueChanging event of jqxGauge. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge (onValueChanging)="ValueChanging($event)"
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ValueChanging(event: any): void 
    {
        // Do Something
    }

    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
valueChanged Event

The event is is triggered when the gauge's value is changed.

Code examples

Bind to the valueChanged event of jqxGauge. 

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge (onValueChanged)="ValueChanged($event)"
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent {
    ValueChanged(event: any): void 
    {
        // Do Something
    }

    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}

Methods

NameReturn TypeArguments
disable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGauge') myGauge: jqxGaugeComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myGauge.disable();
    }

    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
enable Void None 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGauge') myGauge: jqxGaugeComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myGauge.enable();
    }

    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
val Number value: Number 
import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxGauge #myGauge 
            [ranges]="ranges" [ticksMinor]="ticksMinor" [ticksMajor]="ticksMajor"
            [value]="0" [colorScheme]="'scheme05'" [animationDuration]="1200">
        </jqxGauge>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myGauge') myGauge: jqxGaugeComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myGauge.val();
    }

    ticksMinor: any = { interval: 5, size: '5%' };
 
    ticksMajor: any = { interval: 10, size: '9%' };
 
    ranges: any[] =
    [
        { startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }
    ];
}
jQWidgets
  • Facebook
  • Twitter
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2025. All Rights Reserved.