Gauge (Angular)link

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

Gaugelink

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.

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}.

In this article —

Radzen is free to use. You can also test the premium features for 15 days.

Select theme: