Scale Ranges
The RadialGauge 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
}