Indicate a single value and ranges for reference values

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, which are shown in different colors.

Display Values

The radial gauge control offers a ShowText property that determines which values the gauge should display as text.

Automatic Scaling

The RadialGauge offers two properties to configure its layout: StartAngle and SweepAngle. The StartAngle property specifies the RadialGauge's starting angle or its rotation. The SweepAngle property specifies an angle representing the length of the RadialGauge's arc. The RadialGauge also offers an AutoScale property. When AutoScale is set to true, the RadialGauge will be automatically scaled to fill its containing element.

Customize with Themes

The appearance of the gauge controls is largely defined in CSS. You can customize the appearance of all MVC controls to achieve a consistent, attractive look with several professionally-designed themes, or use the default theme.

Show Ranges

RadialGauge has a Ranges property that contains an array of Range objects. By default, the ranges are displayed on the face of the gauge to indicate zones of interest, but the ShowRanges property can be used to hide the ranges. The gauge will determine which range contains the current gauge value and will apply that range's color to the gauge pointer.