Scale Ranges

The LinearGauge 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.

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


In this article