All Components

Multiple Pointers

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

To set multiple pointers to a Linear Gauge, use the ngFor directive.

@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'
    }];
}
In this article