import { Component } from '@angular/core';
import { WrGauge } from 'ngwr/charts/gauge';
@Component({ imports: [WrGauge] })
export class MyComponent {}Gauge
A read-only semicircle dial for a single value.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
<wr-gauge [value]="72" suffix="%" />Custom range and colour
Set min, max and valueColor.
<wr-gauge [value]="9.5" [min]="0" [max]="10" suffix="/10" valueColor="var(--wr-color-warning)" />Tooltip
Set [tooltip]="false" to turn it off.
<wr-gauge [value]="72" suffix="%" [showValue]="false" ariaLabel="CPU" />API
| Name | Description | Type | Default |
|---|---|---|---|
ariaLabel | Accessible name — the role needs one. Falls back to gauge.label. | string | null | null |
valuerequired | The reading. Coerced like every other numeric input here — it was the only one without it, so a NaN reached the arc's d as the literal text NaN, which is invalid path geometry and drops the arc. | number | — |
min | Low end of the scale — where the arc starts. Values below it clamp here. | number | 0 |
max | High end of the scale — where the arc completes. Values above it clamp here. | number | 100 |
size | Diameter in CSS pixels. | number | 160 |
strokeWidth | Arc stroke thickness in viewBox units (out of 100). | number | 10 |
trackColor | Colour of the unfilled arc behind the value. Any CSS colour; the default is the outline token at 60%, which reads as a hairline in both themes. | string | 'color-mix(in srgb, var(--wr-border-base) 60%, transparent)' |
valueColor | Colour of the filled arc. Any CSS colour — pass an intent token to tie it to a threshold, e.g. var(--wr-color-danger) once the value crosses one. | string | 'var(--wr-color-primary)' |
showValue | Show the value text in the center. | boolean | true |
suffix | Unit printed immediately after the number — %, /10, GB. It goes into the accessible text too, so the gauge is announced the way it reads. | string | '' |
tooltip | Show a tooltip with the reading on hover, named by ariaLabel when one is given. Pointer only — the meter announces the same reading. | boolean | true |
valueFormat | Writes the reading in the centre, the tooltip and aria-valuetext, before suffix. null uses Intl.NumberFormat in LOCALE_ID. aria-valuenow stays a number. | ((value: number) => string) | null | null |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/charts/gauge's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-gauge-font-family | var(--wr-font-family-base) | .wr-gauge |
--wr-gauge-suffix-font-size | var(--wr-text-sm) | .wr-gauge |
--wr-gauge-suffix-font-weight | var(--wr-font-weight-medium) | .wr-gauge |
--wr-gauge-suffix-margin-inline-start | var(--wr-space-xs) | .wr-gauge |
--wr-gauge-text-font-size | var(--wr-text-xl) | .wr-gauge |
--wr-gauge-text-font-weight | var(--wr-font-weight-semibold) | .wr-gauge |
--wr-gauge-text-padding-bottom | var(--wr-space-sm) | .wr-gauge |
Dependencies
| Built on | Popover |
|---|