Gauge
An analog gauge with an arc indicator and needle. Reach for it when a value has a meaningful range and an operator needs to judge position within it at a glance.
Reach for it when you need:
- Speed, pressure or temperature against its operating range
Component name: Gauge · Category: Display
In the palette: Analog gauge with arc indicator and needle
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
value | number | 50 | — |
min | number | 0 | — |
max | number | 100 | — |
variant | enum | classic | Options: classic · modern · simple. |
angle | enum | 270 | Options: 270 · 180 · 90 · 360 · custom. |
startAngle | number | -225 | — |
endAngle | number | 45 | — |
thickness | number | 10 | — |
unit | string | "" | — |
gaugeColor | color | hsl(43 96% 56%) | — |
valueColor | color | var(--widget-value) | — |
valueSize | number | 18 | — |
decimals | number | 0 | Fraction digits shown. 1.0.4 |
enableScale | boolean | true | — |
scaleCount | number | 5 | — |
scaleSize | number | 7 | — |
scaleColor | color | var(--widget-scale) | — |
label | string | Gauge | — |
enableLabel | boolean | true | — |
pointerColor | color | var(--widget-label) | — |
labelColor | color | var(--widget-label) | — |
labelSize | number | 11 | — |
labelOffset | number | 0 | — |
colorRanges | array | [] | — |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Bind fillColor to the same tag through a threshold transform and the gauge does the reading for the operator. Give bad quality its own appearance — a grey gauge that means "stopped" and one that means "we have no idea" is the failure operators remember.
By default a numeric readout shows whole numbers. decimals (0–6) is what gets the fraction back: a tag reading 23.998 displays as 24 until you ask for more, and Math.round is not a formatting choice — it is a loss of data with no way to recover it from the screen. Every numeric widget formats through the same helper, so two widgets bound to the same tag cannot disagree about how many digits it has.