RadialGauge

The RadialGauge control displays a circular scale with an indicator that represents a single value and optional ranges to represent reference values.

You can use the RadialGauge as a simple indicator, or set the isReadOnly property to false and use it as an input control.

You can also populate the ranges collection to define ranges of interest, shown in different colors.

This is a RadialGauge with default settings:

This is a RadialGauge with a thinner pointer and ranges that indicate good, acceptable, and bad values.

In this example, the isReadOnly property was set to false. This makes the gauge editable, similar to a slider control:

This is a RadialGauge with a pointer that changes color from green to yellow and to red as the value grows.

In this example, the showRanges property was set to false. This makes the gauge use the ranges only to calculate the color of the pointer.

The gauges below have different values for the startAngle and sweepAngle properties. The autoScale property is set to true, so the gauges are automatically scaled to fill the containing element:

startAngle: {{angles.start}}
sweepAngle: {{angles.sweep}}