# Gauge

> A single value against a range, such as progress to a target.

Source: https://82chart.com/en/docs/gauge/

`type: 'gauge'` draws one value, `data.series[0].data[0]`. Set the range with `gauge: { min, max }` (default 0–100); with `bands` the arc takes the color of the band the value falls in.

```js
const chart = createChart('#chart', {
  type: 'gauge',
  title: 'Progress to target',
  unit: '%',
  gauge: {
    min: 0,
    max: 100,
    label: 'Target $500k',
    bands: [{ to: 50, color: '#e34948' }, { to: 80, color: '#eda100' }, { to: 100, color: '#1baf7a' }],
  },
  data: { series: [{ name: 'Progress', data: [72.4] }] },
});
setTimeout(() => chart.update({ series: [{ name: 'Progress', data: [86.1] }] }), 2500);
```

| gauge property | What it does |
| --- | --- |
| `min` / `max` | Range (default 0 / 100) |
| `bands` | `[{ to, color }]`: the first band whose `to` is at or above the value |
| `label` | Small text under the number |
| `target` | A target value: a tick across the arc with "Target 80%", also in the tooltip (target, share reached) and the screen-reader summary |
| `targetLabel` | Name of the target (default: the locale's 'Target') |

## A target (target)

With `gauge.target` a tick in the text color (`--c82-ink`) marks the target on the arc and its value is written outside. It reads by position and text, not by color.

```js
createChart('#chart', {
  type: 'gauge',
  title: 'Tickets resolved',
  unit: '%',
  language: 'en',
  gauge: { max: 100, target: 90, targetLabel: 'Annual target', label: 'Year to date' },
  data: { series: [{ name: 'Resolved', data: [84.5] }] },
});
```