All Components

Arc Gauge Overview

The Arc Gauge represents a value on a circular arc.

The difference between Arc and Radial gauges is that in Arc gauges the value is represented by a value range on the arc instead of a pointer indicating a specific value.

Basic Usage

The following example demonstrates the Arc Gauge in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <kendo-slider id="value" [min]="0" [max]="100" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
            <label for="value">Value</label>
        </div>
        <kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
            <ng-template kendoArcGaugeCenterTemplate let-value="value">
                {{ value }}%
            </ng-template>
        </kendo-arcgauge>

    `
})
export class AppComponent {
  public value: number = 10;
}

Features

The Arc Gauge delivers the following features:

Center Template

To render the center template of an Arc Gauge, add an ng-template tag with the kendoArcGaugeCenterTemplate directive inside the component. As context, the template provides the current color and value.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <kendo-slider id="value" [min]="0" [max]="100" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
            <label for="value">Value</label>
        </div>
        <kendo-arcgauge [value]="value" [colors]="colors">
            <ng-template kendoArcGaugeCenterTemplate let-value="value" let-color="color">
                <span [style.color]="color">{{ value }}%</span>
            </ng-template>
        </kendo-arcgauge>
    `
})
export class AppComponent {
    public value: number = 10;

    public colors: any[] = [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'
    }];
}

Color Ranges

The Arc Gauge enables you to set different colors depending on the current value. To configure the range colors, set the colors option or use the ColorsComponent.

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

    public colors: any[] = [{
        to: 25,
        color: '#0058e9'
    }, {
        from: 25,
        to: 50,
        color: '#37b400'
    }, {
        from: 50,
        to: 75,
        color: '#ffc000'
    }, {
        from: 75,
        color: '#f31700'
    }];
}
In this article