CircularGaugeComponent
Represents the Kendo UI CircularGauge component for Angular.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-circulargauge [value]="value" [scale]="{ max: 100 }">
<ng-template kendoCircularGaugeCenterTemplate let-value="value">
{{ value }}%
</ng-template>
</kendo-circulargauge>
`
})
class AppComponent {
public value: number = 10;
}
Selector
kendo-circulargauge
Export Name
Accessible in templates as #kendoCircularGaugeInstance="kendoCircularGauge"
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 gauge. | |
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 |
