Gauge
<o-gauge> shows one value on an arc, with a readout in the middle.
The arc is a band on orbit-12, so it touches the edge of the widget, and the gap of the default 270° range sits at the bottom. Change value and only the arc redraws.
Attributes
| Attribute | Default | What it does |
|---|---|---|
value | min | The current value, kept in range: a value past the end is drawn and shown at the end. |
min / max | 0 / 100 | The range of the value. A max below min becomes min. |
step | none | Snaps the value to a grid that starts at min. See min, max and step. |
range | 270 | Arc span in degrees: 360 is a full ring, 180 a semicircle. |
from | auto | Start angle, clockwise from the top. By default the gap is centered at the bottom. |
label | Text in the middle. Without it, the readout is value followed by unit. | |
unit | Suffix for the value, like % or " km/h". With format="unit", an Intl unit such as kilometer-per-hour. | |
fill | #6366f1 | Color of the value arc. Sets --ok-fill. |
track | #262d38 | Color of the track behind it. Sets --ok-track. |
thickness | 2.4 | Band thickness in lanes. A lane is a twelfth of the radius. |
shape | rounded | Ending of the arc: any Orbit shape, such as none, rounded, arrow or slash. |
size | 200px | Width of the widget. Any CSS length; 100% follows its container. |
glow | off | A glow in the value color. glow="12" sets the blur radius in px. |
format, decimals, currency, locale | Number format of the readout and aria-valuetext, through Intl.NumberFormat. See Shared options. | |
theme | dark, light or glass. Also inherited from an ok-theme-* class on a container. See Shared options. |
Two attributes from 0.x still work: orbit sets the thickness the old way, and stroke-width draws an outline in the band's own color, in px.
Styling
Colors are custom properties that inherit, so you can theme every gauge on a page from one rule.
| Property | Default | What it does |
|---|---|---|
--ok-fill | #6366f1 | Value arc. |
--ok-track | #262d38 | Track. |
--ok-hub-color | inherits | Color of the readout in the middle. |
--ok-hub-bg | none | Background of the hole in the middle. |
--ok-hub-size | 1.4em | Font size of the readout. |
--ok-font-size | 8cqmin | Base font size, as a share of the widget. Text scales with it. |
More examples
Semicircle with a range
Full ring with a glow
Live value
Accessibility
The gauge has role="meter" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext kept in sync; aria-valuetext uses the number format. Its name is the readout; set aria-label or aria-labelledby to give it a better one, and the gauge keeps it. Color is never the only signal: the number is always in the middle unless you replace it with label.