Still using Radzen Studio?
Achieve more with Radzen Blazor Studio

Radzen Blazor Studio is our new flagship product and vision of how rapid Blazor application development should be done.

Go to Radzen Blazor Studio

Gauge (Angular)

This article demonstrates how to use the Gauge component. Check also the component guide and API reference.

Gauge

Name Type Default Description
Name string ‘gauge’ + index suffix Unique name of the Gauge.
Value number or expression null The current value of the Gauge.
Text string null The text that the Gauge displays. By the Gauge displays the Value and Unit.
Unit string null The unit of the Gauge.
Min number 0 The minumum value of the Gauge.
Max number 100 The maximum value of the Gauge.
Color string null The color of the Gauge.
AngleSpan number 240 The angle span of the Gauge arc (in degrees).
Start Angle number -120 The angle from which the Gauge arc starts (in degrees).
ShowAxis Angle boolean false Whether to show the Gauge axis or not.
SmallSegments number 2 The number of small axis segments. Taken under account when ShowAxis is set to true.
LargeSegments number 10 The number of large axis segments. Taken under account when ShowAxis is set to true.

Configuration

The only required property of the Gauge component is Value. It specifies the current value of the Gauge.

You can set the Value to a literal number e.g. 50 or data-bind it by setting it to some expression e.g. ${gaugeValue}.