All Components

Radial Gauge Overview

The Radial Gauge represents values on a circular arc.

Basic Usage

The following example demonstrates the Radial Gauge in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <kendo-slider id="value" [min]="0" [max]="50" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
            <label for="value">Value</label>
        </div>
        <kendo-radialgauge [pointer]="{ value: value }" [scale]="{ max: 50 }">
        </kendo-radialgauge>
    `
})
export class AppComponent {
  public value: number = 10;
}

Features

The Radial Gauge delivers the following features:

Scale Ranges

The Radial Gauge enables you to highlight specific value ranges on the scale by setting them in different colors. To configure the scale colors, set the ranges option or the ColorsComponent.

@Component({
    selector: 'my-app',
    template: `
        <kendo-radialgauge [pointer]="{ value: value }" >
            <kendo-radialgauge-scale [minorUnit]="5" [majorUnit]="20" [max]="180">
                <kendo-radialgauge-scale-ranges>
                    <kendo-radialgauge-scale-range [from]="80" [to]="120" color="#ffc700">
                    </kendo-radialgauge-scale-range>
                    <kendo-radialgauge-scale-range [from]="120" [to]="150" color="#ff7a00">
                    </kendo-radialgauge-scale-range>
                    <kendo-radialgauge-scale-range [from]="150" [to]="180" color="#c20000">
                    </kendo-radialgauge-scale-range>
                </kendo-radialgauge-scale-ranges>
            </kendo-radialgauge-scale>
        </kendo-radialgauge>
    `
})
export class AppComponent {
    public value: number = 10;

    public
}

Multiple Pointers

The Radial Gauge enables you to highlight multiple values by rendering multiple pointers.

@Component({
    selector: 'my-app',
    template: `
        <kendo-radialgauge>
            <kendo-radialgauge-pointers>
                <kendo-radialgauge-pointer *ngFor="let pointer of pointers"
                    [value]="pointer.value" [color]="pointer.color">
                </kendo-radialgauge-pointer>
            </kendo-radialgauge-pointers>
        </kendo-radialgauge>
    `
})
export class AppComponent {
    public pointers: any[] = [{
        value: 10,
        color: '#ffd246'
    }, {
        value: 20,
        color: '#28b4c8'
    }, {
        value: 30,
        color: '#78d237'
    }];
}
In this article