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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

							

						

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

							

						

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

						

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

						

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