# 옵션

> createChart 에 넘기는 모든 옵션.

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

`data` 말고는 모두 선택입니다. 아무것도 주지 않으면 카드 모양의 선 차트, 문서 언어(없으면 한국어), 페이지를 따라가는 테마로 그립니다.

## 종류와 데이터

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `type` | 'line' | `'line' \| 'area' \| 'bar' \| 'pie' \| 'donut' \| 'scatter' \| 'radar' \| 'gauge' \| 'pyramid' \| 'heatmap' \| 'calendar' \| 'treemap' \| 'funnel' \| 'waterfall'` |
| `data` | (필수) | `{ labels?, series }` — [데이터 형식](https://82chart.com/docs/data-format/) |

## 카드 머리글

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `eyebrow` | - | 제목 위 작은 글 (대문자로 표시) |
| `title` | - | 제목. 요약·표 제목·파일 이름에도 쓰임 |
| `subtitle` | - | 제목 아래 회색 글 |
| `value` | - | 큰 대표 숫자. 숫자면 쉼표·`prefix`·`unit` 을 붙임 |
| `delta` | - | 증감 배지. 숫자면 퍼센트, 문자열이면 그대로 |
| `deltaUpIsGood` | true | 오르면 좋은 지표인지 |
| `deltaColors` | 'semantic' | `'semantic'`(좋음 초록·나쁨 빨강) 또는 `'korea'`(오름 빨강 ▲·내림 파랑 ▼) |
| `deltaLabel` | - | 배지 옆 글, 예: '전월 대비' |
| `footnote` | - | 차트 아래 작은 글, 예: '단위: 백만원' |
| `description` | - | 스크린리더가 자동 요약 앞에 읽는 설명 |
| `skin` | 'card' | `'card' \| 'plain' \| 'sparkline'` |

## 크기

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `width` | 부모 폭 | 부모 폭을 알 수 없을 때 쓰는 폭(px) |
| `height` | 종류별 자동 | 그림 높이(px) 또는 `'auto'`(폭 × `aspectRatio`) |
| `aspectRatio` | 0.5625 | `height: 'auto'` 일 때 높이 ÷ 폭 |

## 모양

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `horizontal` | false | 가로 막대 |
| `stacked` | false | `true` 또는 `'percent'`(100% 누적) |
| `smooth` | false | `curve: 'smooth'` 와 같음 |
| `curve` | 'straight' | `'straight' \| 'smooth' \| 'step'` |
| `nulls` | 'gap' | `'gap' \| 'connect' \| 'zero'` |
| `points` | 'auto' | 점 표시 (auto: 30개 이하) |
| `pointShape` | 'circle' | `'circle' \| 'square' \| 'diamond'` |
| `lastPoint` | 선 하나면 true | 마지막 점 강조 |
| `barRadius` | 6 | 막대 값 쪽 끝 둥글기(px) |
| `barWidth` | 0.82 / 0.78 | 칸 중 막대 묶음이 차지하는 비율 |
| `gradient` | true | 막대·영역의 옅은 그라디언트 |
| `stackTotals` | false | 쌓은 막대 위 합계 |
| `dataLabels` | false | `true \| 'end'`: 막대 끝·선 끝에만 값 |
| `otherThreshold` | 0.02 | 파이·도넛에서 이보다 작은 조각은 "기타" |
| `startAngle` | 0 | 파이·도넛 시작 각도(도, 0 = 12시) |
| `donutHole` | 0.62 | 도넛 구멍 크기(0–1) |
| `donutLabel` | 합계 | 도넛 가운데 글, `false` 면 없음 |
| `gauge` | - | `{ min, max, bands: [{ to, color }], label }` |
| `pyramid` | - | `{ percent }`: 인구 피라미드를 전체 대비 비율로 ([인구 피라미드](https://82chart.com/docs/pyramid/)) |
| `heatmap` | - | `{ min, max, color, legend, labels, weekStart }`: 히트맵·달력 색 범위와 색 범례 ([히트맵](https://82chart.com/docs/heatmap/)) |
| `colorBy` | 'series' | 트리맵: `'series' \| 'change'` (등락률로 두 색 + 회색 0) |
| `treemap` | - | `{ range }`: 가장 진한 색이 되는 등락률(%) |

## 축, 범례, 툴팁

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `xAxis / yAxis` | - | `{ title, min, max, format, ticks, step, integer, reverse, grid, type, beginAtZero, labels }` — 아래 표 |
| `y2Axis` | - | 오른쪽 y축. 시리즈에 `axis: 'right'` 가 있을 때만 생김. 같은 옵션 + `unit`, `prefix` |
| `legend` | 시리즈 2개 이상이면 위 | `boolean \| 'top' \| 'bottom' \| 'right'` |
| `tooltip` | true | `boolean \| { format(value, ctx) }` |

## 숫자와 날짜

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `numberFormat` | ko: 'korean', 그 외 'compact' | `'korean' \| 'compact' \| 'comma' \| 'percent' \| (v) => string` |
| `scale` | - | 축 눈금을 이 수로 나눔 (1000000 + 백만원) |
| `unit` | - | 값 뒤 단위 |
| `prefix` | - | 값 앞 기호 |
| `decimals` | 최대 2 | 툴팁·라벨 소수 자리 |
| `dateFormat` | 'auto' | 날짜 패턴, 예: `'M월'`, `'YYYY.MM.DD'` |
| `timeZone` | 실행 환경 | 날짜를 읽고 적는 IANA 시간대, 예: `'Asia/Seoul'` (UTC 서버의 SSR 에 필요) |

## 색과 언어

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `colors` | - | 시리즈 순서대로 색 |
| `palette` | 'default' | `'default' \| 'korea' \| 'mono'` |
| `negativeColor` | - | 0보다 작은 막대 색 |
| `theme` | 'auto' | `'light' \| 'dark' \| 'auto'` |
| `language` | 문서 lang, 없으면 ko | `'ko' \| 'en' \| 'ja' \| 'zh'` (`registerLocale` 로 추가) |
| `locale` | - | 화면 문구 일부만 바꾸기 |

## 기능

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `animation` | true | 처음 그릴 때 애니메이션 (동작 줄이기 설정이면 꺼짐) |
| `zoom` | false | 확대·이동 |
| `downsample` | 2,000개 넘으면 자동 | 선·영역의 점을 LTTB 로 이만큼 줄임. `false` 면 모두 그림. CSV·표는 원본 |
| `progressive` | 5,000개 넘으면 자동 | 큰 선·영역·산점도를 단계로: 자리 표시 → 거친 그림 → 전체. 숫자는 기준 점 수, `false` 면 한 번에 |
| `annotations` | - | `{ x, y, bands }` |
| `exporting` | true | 내려받기 단추와 ⋯ 메뉴 |
| `table` | false | 데이터 표를 보이게 |
| `noData` | 언어별 문구 | 그릴 값이 없을 때 문구 |
| `group` | - | 같은 이름끼리 크로스헤어 공유 |
| `loading` | false | 불러오는 중 자리 표시 |

## 콜백과 기타

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `onClick` | - | `(point: ChartPoint) => void` |
| `onReady` | - | `(chart) => void` — 만든 직후 한 번 |
| `telemetry` | true | 하루 한 번 도메인과 버전만 82chart.com 에 알림 (데이터는 보내지 않음). `false` 로 끔 |
| `framework` | - | 래퍼가 채우는 값 |

## xAxis · yAxis · y2Axis

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `title` | - | 축 제목 |
| `min / max` | 자동 | 범위 |
| `format` | numberFormat | 눈금 글자 (같은 값 또는 함수; 카테고리 축은 라벨을 받음) |
| `ticks` | 자동 | 눈금 개수 대략 (근처의 깔끔한 수를 고름) |
| `grid` | true | 격자선 |
| `type` | 자동 | `'category' \| 'linear' \| 'time'` |
| `beginAtZero` | 막대·영역 true | 0에서 시작 |
| `labels` | true | 눈금 글자 표시 |
| `integer` | false | 정수 눈금만 (건수·인원) |
| `step` | 자동 | 눈금 간격 고정, 예: 10 |
| `reverse` | false | y축: 작은 값이 위로(순위). 가로 막대: 카테고리 순서 뒤집기 |
| `unit / prefix` | - | `y2Axis` 전용: 오른쪽 축과 그 시리즈의 단위 |

> 오른쪽 y축(`y2Axis`)은 시리즈에 `axis: 'right'` 를 줄 때만 생깁니다. 주의할 점은 [콤보 차트](https://82chart.com/docs/combo/)에 있습니다.