CircularGaugeComponent

Represents the Kendo UI CircularGauge component for Angular.

ts

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	string		Sets the color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
colors	ColorRange[]		Sets the color ranges of the value pointer.
gaugeArea	GaugeArea		Specifies options for the Gauge area.
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.
scale	CircularGaugeScale		Specifies the scale options of the Gauge.
transitions	boolean		Specifies if the changes will be animated.
value	number		Sets 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 resolves with the export visual.

resize
Detects the size of the container and redraws the Gauge. Resizing happens automatically unless you set the resizeRateLimit option to 0.