# Gauge

> A read-only semicircle dial for a single value.

Source: https://ngwr.dev/charts/gauge  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrGauge } from 'ngwr/charts/gauge';

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

```scss
@use 'ngwr/charts/gauge';
```

## Basic

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

## Custom range and colour

Set `min`, `max` and `valueColor`.

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

## Tooltip

Set `[tooltip]="false"` to turn it off.

```angular-html
<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` |
| `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` | 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](https://ngwr.dev/reference/components/popover) |
| --- | --- |

## See also

- [Knob](https://ngwr.dev/reference/components/knob) — Pick a number by turning a dial.
- [Progress](https://ngwr.dev/reference/components/progress) — A bar that shows how far a task has got.
- [Statistic](https://ngwr.dev/reference/components/statistic) — A key number with a label and an optional change.
- [Donut Chart](https://ngwr.dev/charts/donut-chart) — Parts of a whole as a ring or a pie.
- [Popover](https://ngwr.dev/reference/components/popover) — Show a template, or a text tooltip, next to its trigger.