Arc Gauge Overview
The Arc Gauge represents a value on a circular arc.
The difference between Arc and Radial gauges is that in Arc gauges the value is represented by a value range on the arc instead of a pointer indicating a specific value.
Basic Usage
The following example demonstrates the Arc Gauge in action.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<kendo-slider id="value" [min]="0" [max]="100" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
<label for="value">Value</label>
</div>
<kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
<ng-template kendoArcGaugeCenterTemplate let-value="value">
{{ value }}%
</ng-template>
</kendo-arcgauge>
`
})
export class AppComponent {
public value: number = 10;
}Features
The Arc Gauge delivers the following features:
Center Template
To render the center template of an Arc Gauge, add an ng-template tag with the kendoArcGaugeCenterTemplate directive inside the component. As context, the template provides the current color and value.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<kendo-slider id="value" [min]="0" [max]="100" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
<label for="value">Value</label>
</div>
<kendo-arcgauge [value]="value" [colors]="colors">
<ng-template kendoArcGaugeCenterTemplate let-value="value" let-color="color">
<span [style.color]="color">{{ value }}%</span>
</ng-template>
</kendo-arcgauge>
`
})
export class AppComponent {
public value: number = 10;
public colors: any[] = [{
to: 25,
color: '#0058e9'
}, {
from: 25,
to: 50,
color: '#37b400'
}, {
from: 50,
to: 75,
color: '#ffc000'
}, {
from: 75,
color: '#f31700'
}];
}Color Ranges
The Arc Gauge enables you to set different colors depending on the current value. To configure the range colors, set the colors option or use the ColorsComponent.
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<kendo-slider id="value" [min]="0" [max]="100" [smallStep]="10" [(ngModel)]="value"></kendo-slider>
<label for="value">Value</label>
</div>
<kendo-arcgauge [value]="value" [colors]="colors">
</kendo-arcgauge>
`
})
export class AppComponent {
public value: number = 10;
public colors: any[] = [{
to: 25,
color: '#0058e9'
}, {
from: 25,
to: 50,
color: '#37b400'
}, {
from: 50,
to: 75,
color: '#ffc000'
}, {
from: 75,
color: '#f31700'
}];
}