# 게이지

> 목표 대비 달성률 같은 값 하나.

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

`type: 'gauge'` 는 `data.series[0].data[0]` 값 하나를 그립니다. 범위는 `gauge: { min, max }`(기본 0–100), `bands` 로 구간 색을 정하면 값이 들어간 구간의 색으로 칠합니다.

```js
const chart = createChart('#chart', {
  type: 'gauge',
  title: '이번 달 목표 달성률',
  unit: '%',
  gauge: {
    min: 0,
    max: 100,
    label: '목표 5억 원',
    bands: [{ to: 50, color: '#e34948' }, { to: 80, color: '#eda100' }, { to: 100, color: '#1baf7a' }],
  },
  data: { series: [{ name: '달성률', data: [72.4] }] },
});
setTimeout(() => chart.update({ series: [{ name: '달성률', data: [86.1] }] }), 2500);
```

| gauge 속성 | 설명 |
| --- | --- |
| `min` / `max` | 범위 (기본 0 / 100) |
| `bands` | `[{ to, color }]` — 값이 `to` 이하인 첫 구간의 색 |
| `label` | 숫자 아래 작은 글 |
| `target` | 목표값. 호를 가로지르는 눈금과 "목표 80%" 글자를 그리고, 툴팁(목표·달성률)과 스크린리더 요약에도 넣음 |
| `targetLabel` | 목표의 이름 (기본: 언어별 '목표' / 'Target') |

## 목표 표시 (target)

`gauge.target` 을 주면 목표 위치에 글자색(`--c82-ink`)의 눈금을 긋고 바깥에 목표값을 적습니다. 색이 아니라 위치와 글자로 읽히므로 색약 사용자도 구분할 수 있습니다.

```js
createChart('#chart', {
  type: 'gauge',
  title: '민원 처리율',
  unit: '%',
  gauge: { max: 100, target: 90, targetLabel: '연간 목표', label: '10월 누계' },
  data: { series: [{ name: '처리율', data: [84.5] }] },
});
```