All Components

Linear Gauge Overview

The Linear Gauge represents values on a linear scale.

Basic Usage

The following example demonstrates the Linear 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-lineargauge [pointer]="{ value: value }" [scale]="{ max: 50 }">
        </kendo-lineargauge>
    `
})
export class AppComponent {
  public value: number = 10;
}

Features

The Linear Gauge delivers the following features:

Scale Ranges

The Linear 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-lineargauge [pointer]="{ value: value, shape: 'arrow' }" >
            <kendo-lineargauge-scale [minorUnit]="5" [majorUnit]="20" [max]="180">
                <kendo-lineargauge-scale-ranges>
                    <kendo-lineargauge-scale-range [from]="80" [to]="120" color="#ffc700">
                    </kendo-lineargauge-scale-range>
                    <kendo-lineargauge-scale-range [from]="120" [to]="150" color="#ff7a00">
                    </kendo-lineargauge-scale-range>
                    <kendo-lineargauge-scale-range [from]="150" [to]="180" color="#c20000">
                    </kendo-lineargauge-scale-range>
                </kendo-lineargauge-scale-ranges>
            </kendo-lineargauge-scale>
        </kendo-lineargauge>
    `
})
export class AppComponent {
    public value: number = 10;

    public
}

Multiple Pointers

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

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

Orientation

You can render the Linear Gauge either vertically or horizontally. By default, the Linear Gauge is rendered vertically. To change its orientation, set the scale.vertical option to false.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <kendo-lineargauge [pointer]="{ value: value }" [scale]="{ vertical: false }">
                </kendo-lineargauge>
            </div>
            <div class="col-sm-12 col-md-6">
                <kendo-lineargauge [pointer]="{ value: value }" [scale]="{ vertical: true }">
                </kendo-lineargauge>
            </div>
        </div>
    `,
    styles: [`
        .k-gauge {
            display: block;
        }
    `]
})
export class AppComponent {
    public value: number = 10;
}
In this article