All Components

Multiple Pointers

The RadialGauge enables you to highlight multiple values by rendering multiple pointers.

You can independently customize each pointer including its current value, color, and length.

To avoid repetition, declare pointers by using the ngFor directive.

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

        // Default length
        // length: 1
    }];
}
In this article