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