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
color
string
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
number
The opacity of the value pointer.
renderAs
"canvas" | "svg"
Specifies the output type.
resizeRateLimit
number
The maximum number of times the Gauge resizes per second.
Defaults to 10
. To disable the automatic resizing, set resizeRateLimit
to 0
.
scale
The scale options of the gauge.
transitions
boolean
Specifies if the changes will be animated.
value
number
The value of the gauge.
Methods
exportImage
Exports the Gauge as an image. The export operation is asynchronous and returns a promise.
Parameters
options
ImageExportOptions
The parameters for the exported image.
Returns
Promise<string>
- A promise that will be resolved with a PNG image that is encoded as a Data URI.
exportSVG
Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise.
Parameters
options
SVGExportOptions
The parameters for the exported file.
Returns
Promise<string>
- A promise that will be resolved with an SVG document that is encoded as a Data URI.
exportVisual
Exports the gauge as a Drawing Scene
.
Returns
Promise<Group>
- A promise that will be resolved with the export visual.
resize
Detects the size of the container and redraws the Gauge.
Resizing is automatic unless you set the resizeRateLimit
option to 0
.