Radial Gauge Overview
The Radial Gauge represents values on a circular arc.
Basic Usage
The following example demonstrates the Radial 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-radialgauge [pointer]="{ value: value }" [scale]="{ max: 50 }">
</kendo-radialgauge>
`
})
export class AppComponent {
public value: number = 10;
}Features
The Radial Gauge delivers the following features:
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
}Multiple Pointers
The Radial Gauge enables you to highlight multiple values by rendering multiple pointers.
@Component({
selector: 'my-app',
template: `
<kendo-radialgauge>
<kendo-radialgauge-pointers>
<kendo-radialgauge-pointer *ngFor="let pointer of pointers"
[value]="pointer.value" [color]="pointer.color">
</kendo-radialgauge-pointer>
</kendo-radialgauge-pointers>
</kendo-radialgauge>
`
})
export class AppComponent {
public pointers: any[] = [{
value: 10,
color: '#ffd246'
}, {
value: 20,
color: '#28b4c8'
}, {
value: 30,
color: '#78d237'
}];
}