All Components

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