# Gauge

> Semicircle progress display — read-only, perfect for utilisation and score widgets.

Source: https://ngwr.dev/reference/components/gauge  
Kind: Component

## Installation

```angular-ts
import { WrGauge } from 'ngwr/gauge';

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

## Basic

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

## Custom range + color

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

## API

| 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` | `''` |