문서 › 차트 종류

게이지

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

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

움직이는 예제

이 예제의 코드

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`	숫자 아래 작은 글