ArcGaugeComponent
Represents the Kendo UI ArcGauge component for Angular.
Definition
Package:@progress/kendo-angular-gauges
Selector:kendo-arcgauge
Export Name:Accessible in templates as #kendoArcGaugeInstance="kendoArcGauge"
Syntax:
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;
}Inputs
color
string
Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
Sets the color ranges of the value pointer.
opacity
number
Sets 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.
10
transitions
boolean
Specifies if the changes will be animated.
value
number
Sets the value of the gauge.
Methods
Exports the Gauge as an image. The export operation is asynchronous and returns a promise.
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.
Exports the Gauge as an SVG document. The export operation is asynchronous and returns a promise.
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.
Exports the Gauge as a Drawing Scene.
Promise<Group>
A promise that resolves with the export visual.
Detects the size of the container and redraws the Gauge.
Resizing happens automatically unless you set the resizeRateLimit option to 0.