All Components

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
}
In this article