Getting Started with Kendo UI for Angular ArcGauge
The ArcGauge represents a value on a circular arc.
The difference between Arc and Radial gauges is that in ArcGauges 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 ArcGauge 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;
}