New to Kendo UI for AngularStart a free 30-day trial

Definition

Package:@progress/kendo-angular-gauges

Selector:kendo-radialgauge

Export Name:Accessible in templates as #kendoRadialGaugeInstance="kendoRadialGauge"

Syntax:

ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
     <kendo-radialgauge [pointer]="{ value: value }">
     </kendo-radialgauge>
  `
})
export class AppComponent {
  public value: number = 10;
}

Inputs

Specifies options for the Gauge area.

Sets the configuration of the pointers. You can configure single or multiple pointers for the RadialGauge.

renderAs

"canvas" | "svg"

Specifies the output type.

The maximum number of times the Gauge resizes per second. Defaults to 10. To disable the automatic resizing, set resizeRateLimit to 0.

Sets the configuration of the scale. The scale defines the range, appearance, and behavior of the gauge.

Specifies if the changes will be animated.

Methods

Exports the Gauge as an image. The export operation is asynchronous and returns a promise.

Parameters:optionsImageExportOptions

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.

Parameters:optionsSVGExportOptions

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.

Returns:

Promise​<Group>

  • A promise that will be resolved with the export visual.

Detects the size of the container and redraws the Gauge. Resizing is automatic unless you set the resizeRateLimit option to 0.