Gauge

import { WrGauge } from 'ngwr/gauge';

@Component({ imports: [WrGauge] })
export class MyComponent {}

<wr-gauge [value]="72" suffix="%" />

72%

<wr-gauge [value]="9.5" [min]="0" [max]="10" suffix="/10" valueColor="var(--wr-color-warning)" />

9.5/10

Name	Description	Type	Default
`ariaLabel`	Accessible name — the role needs one. Falls back to `gauge.label`.	`string \| null`	`null`
`value`required	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`	—	`number`	`0`
`max`	—	`number`	`100`
`size`	Diameter in CSS pixels.	`number`	`160`
`strokeWidth`	Arc stroke thickness in viewBox units (out of 100).	`number`	`10`
`trackColor`	—	`string`	`'rgba(var(--wr-color-light-rgb), 0.6)'`
`valueColor`	—	`string`	`'var(--wr-color-primary)'`
`showValue`	Show the value text in the center.	`boolean`	`true`
`suffix`	—	`string`	`''`

Installation