# 축 다루기

> 정수 눈금, 눈금 간격, 축 뒤집기(순위), 두 줄 라벨, 오른쪽 y축.

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

축 옵션은 `xAxis` · `yAxis` (오른쪽 축은 `y2Axis`) 에 넣습니다. 가로 막대에서도 값 축의 옵션은 `yAxis` 입니다.

## 정수 눈금과 눈금 간격

건수·인원처럼 소수가 없는 값은 `integer: true` 로 0.5 같은 눈금을 막습니다. `step` 은 눈금 사이를 고정합니다(예: 10 단위). 눈금이 200개를 넘을 만큼 작은 `step` 은 무시하고 자동으로 정합니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '요일별 문의',
  unit: '건',
  yAxis: { integer: true },
  data: {
    labels: ['월', '화', '수', '목', '금'],
    series: [{ name: '문의', data: [2, 3, 1, 3, 2] }],
  },
});
```

## 축 뒤집기 (순위)

`yAxis: { reverse: true }` 는 값 축을 뒤집어 작은 값이 위로 갑니다. 1위가 맨 위에 오는 순위 차트에 씁니다. 가로 막대에서는 카테고리 순서가 뒤집혀 첫 항목이 맨 아래로 갑니다.

```js
createChart('#chart', {
  type: 'line',
  title: '검색 순위',
  yAxis: { reverse: true, integer: true, min: 1, title: '순위' },
  data: {
    labels: ['1주', '2주', '3주', '4주', '5주'],
    series: [
      { name: '우리 상품', data: [8, 5, 3, 2, 1] },
      { name: '경쟁 상품', data: [1, 2, 2, 4, 6] },
    ],
  },
});
```

## 두 줄 라벨

카테고리 라벨에 `'\n'` 을 넣으면 두 줄로 적습니다. "서울특별시 강남구" 같은 긴 이름에 좋습니다. 툴팁과 표에서는 한 줄로 이어 적습니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '구별 매장 수',
  unit: '곳',
  data: {
    labels: ['서울특별시\n강남구', '서울특별시\n송파구', '부산광역시\n해운대구', '대구광역시\n수성구'],
    series: [{ name: '매장', data: [42, 35, 28, 19] }],
  },
});
```

## 로그 축 (log, symlog)

값이 몇 자리씩 차이 나면(사용자 수 100명에서 1억 명, 매출 1만 원에서 100억 원) `yAxis: { type: 'log' }` 로 로그 축을 씁니다. 눈금은 10의 거듭제곱이고 한국어 단위로 적습니다(100 · 1,000 · 1만 · 10만 · 100만 · 1억). 자릿수가 많으면 한 칸씩 건너뛰고, 두 자리 이하면 2와 5를 더합니다(10 · 20 · 50 · 100). 0 이하의 값은 로그로 그릴 수 없어 선은 끊고 막대는 바닥에 둡니다. 툴팁·표·CSV 는 원래 값을 그대로 보여 주고, 확대해도 로그 축을 유지합니다.

```js
createChart('#chart', {
  type: 'line',
  title: '누적 가입자',
  unit: '명',
  yAxis: { type: 'log' },
  zoom: true,
  data: {
    labels: ['2018', '2019', '2020', '2021', '2022', '2023', '2024', '2025'],
    series: [{ name: '가입자', data: [320, 4100, 38000, 410000, 2900000, 15000000, 48000000, 110000000] }],
  },
});
```

0이나 음수가 섞이면 `type: 'symlog'` 를 씁니다. 0 근처는 선형, 멀어질수록 로그처럼 줄어들어 손익처럼 크기 차이가 큰 양수·음수를 한 축에 둘 수 있습니다. 산점도는 `xAxis: { type: 'log' }` 로 x축도 로그로 그립니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '사업별 손익',
  unit: '원',
  yAxis: { type: 'symlog' },
  data: {
    labels: ['A사업', 'B사업', 'C사업', 'D사업'],
    series: [{ name: '손익', data: [-3200000, 45000, 0, 870000000] }],
  },
});
```

> 로그 축은 100% 누적, 인구 피라미드, 폭포 차트에서는 쓰지 않습니다(합계와 비율을 읽는 차트라서). 로그 축의 막대는 길이가 값에 비례하지 않으니 독자에게 축이 로그라고 알려 주세요(축 제목이나 `footnote`).

## 오른쪽 y축

단위가 다른 시리즈는 `axis: 'right'` 로 오른쪽 축에 둘 수 있습니다. 두 축이 모두 0을 지나면 왼쪽의 0원과 오른쪽의 0%가 같은 격자선에 오도록 맞춥니다(`y2Axis: { alignZero: false }` 로 끔). 주의할 점과 예는 [콤보 차트](https://82chart.com/docs/combo/)에 있습니다.

| 옵션 | 설명 |
| --- | --- |
| `integer` | 정수 눈금만 |
| `step` | 눈금 간격 고정 |
| `reverse` | 값 축 뒤집기 (가로 막대: 카테고리 순서) |
| `unit` / `prefix` | `y2Axis` 전용: 오른쪽 축과 그 시리즈의 단위 |
| `type` | 값 축: `'log' \| 'symlog'` (산점도는 x축도) |
| `alignZero` | `y2Axis` 전용: 두 축의 0을 같은 격자선에 (기본 true) |