ArcGaugeComponent
Represents the Kendo UI ArcGauge component for Angular.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-arcgauge [value]="value" [scale]="{ max: 100 }">
<ng-template kendoArcGaugeCenterTemplate let-value="value">
{{ value }}%
</ng-template>
</kendo-arcgauge>
`
})
class AppComponent {
public value: number = 10;
}
Selector
kendo-arcgauge
Export Name
Accessible in templates as #kendoArcGaugeInstance="kendoArcGauge"
Inputs
Name | Type | Default | Description |
---|---|---|---|
color |
|
The color of the value pointer. Accepts a valid CSS color string, including hex and rgb. | |
colors |
|
The color ranges of the value pointer. | |
gaugeArea |
|
Specifies options for the Gauge area. | |
opacity |
|
The opacity of the value pointer. | |
renderAs |
|
Specifies the output type. | |
resizeRateLimit |
|
The maximum number of times the Gauge resizes per second.
Defaults to | |
scale |
|
The scale options of the ArcGauge. | |
transitions |
|
Specifies if the changes will be animated. | |
value |
|
The value of the gauge. |
Methods
exportImage | ||||||
---|---|---|---|---|---|---|
Exports the Gauge as an image. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportSVG | ||||||
---|---|---|---|---|---|---|
Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise. | ||||||
| ||||||
|
exportVisual | ||||
---|---|---|---|---|
Exports the gauge as a Drawing | ||||
|
resize |
---|
Detects the size of the container and redraws the Gauge.
Resizing is automatic unless you set the |