# 콤보 (막대+선)

> 시리즈마다 type 을 정해 한 차트에 섞기. 단위가 다르면 오른쪽 y축(직접 켜기).

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

콤보 차트(혼합 차트)란 막대와 선처럼 종류가 다른 차트를 한 그림에 겹쳐, 양(막대)과 추세나 비율(선)을 함께 보여 주는 차트입니다.

시리즈마다 `type` 을 주면 막대 위에 선을 올리는 식으로 섞을 수 있습니다. 관리자 통계에서 흔한 "일별 매출 막대 + 7일 평균 선"이 대표적입니다. 두 시리즈의 단위가 같으면 y축 하나로 충분합니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '일별 매출과 7일 평균',
  unit: '원',
  data: {
    labels: ['10.08', '10.09', '10.10', '10.11', '10.12', '10.13', '10.14', '10.15', '10.16', '10.17'],
    series: [
      { name: '매출', data: [3120000, 2870000, 3540000, 4210000, 3980000, 2650000, 2410000, 3390000, 3710000, 3060000] },
      { name: '7일 평균', type: 'line', smooth: true, data: [3010000, 3050000, 3110000, 3240000, 3330000, 3310000, 3250000, 3290000, 3310000, 3260000] },
    ],
  },
});
```

## 이중 y축 (직접 켜기)

단위가 다른 두 값, 예를 들어 "월 매출(원) 막대 + 전년 대비 증감률(%) 선"은 시리즈에 `axis: 'right'` 를 주면 오른쪽에 두 번째 축이 생깁니다. 오른쪽 축의 눈금 모양·단위·제목은 `y2Axis` 로 정합니다. 어떤 시리즈도 `axis: 'right'` 를 쓰지 않으면 지금까지와 똑같이 축이 하나입니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '월 매출과 전년 대비 증감률',
  unit: '원',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    series: [
      { name: '매출', data: [182000000, 164000000, 201000000, 223000000, 248000000, 236000000] },
      { name: '증감률', type: 'line', axis: 'right', data: [4.2, -2.1, 6.8, 9.5, 12.3, 7.4] },
    ],
  },
  y2Axis: { unit: '%', title: '증감률' },
});
```

- 오른쪽 축은 왼쪽 축과 눈금 개수를 맞춰서 두 축의 숫자가 같은 격자선 위에 놓입니다. `y2Axis` 에 `min` · `max` · `step` · `ticks` 를 주면 그 값을 따르고, 그때는 격자선이 왼쪽 축 기준입니다.
- 오른쪽 축은 차트의 `unit` · `prefix` · `scale` 을 물려받지 않습니다(단위가 다르기 때문). 숫자 모양(만·억)과 `decimals` 만 물려받고, 단위는 `y2Axis.unit` · `y2Axis.prefix`, 모양은 `y2Axis.format`(`'percent'`, `'comma'` 또는 함수)으로 정합니다.
- 툴팁과 표는 시리즈마다 자기 축의 형식으로 적고, 범례에는 오른쪽 축 시리즈 뒤에 **(우)** 가 붙습니다(영어 (R), `locale.rightAxis` 로 변경).
- 오른쪽 시리즈는 왼쪽 시리즈와 쌓이지 않습니다. 가로 막대(`horizontal`)에서는 쓸 수 없습니다.

> **이중 y축은 조심해서 쓰세요.** 두 축의 범위는 각자 정해지므로, 범위를 어떻게 잡느냐에 따라 같은 데이터가 "같이 오른다"로도 "엇갈린다"로도 보입니다. 두 선이 만나는 점이나 기울기의 차이에는 뜻이 없습니다. 그래서 기본은 꺼져 있고 시리즈마다 직접 켜야 합니다. 비교가 목적이라면 [차트 두 개를 위아래로 놓고 크로스헤어를 묶는 방법](https://82chart.com/docs/group-sync/)이 더 정직합니다.

## 자주 묻는 질문

### 콤보 차트에서 이중 축은 어떻게 쓰나요?

단위가 다른 시리즈에 `axis: 'right'` 를 주면 오른쪽에 두 번째 y축이 생기고, 그 축의 단위·제목·모양은 `y2Axis` 로 정합니다. 두 축의 범위에 따라 같은 데이터가 다르게 보이므로 기본은 꺼져 있습니다.

### 엑셀 콤보 차트처럼 만들 수 있나요?

네. 엑셀의 "계열마다 차트 종류 고르기"는 시리즈의 `type`(`'bar'`, `'line'`), "보조 축"은 `axis: 'right'` 에 해당합니다. 엑셀 대신 웹 화면에서 같은 보고서 차트를 그릴 수 있습니다.

### 오른쪽 축의 범위를 정하려면?

`y2Axis: { min, max, step }` 이나 `ticks` 를 줍니다. 주지 않으면 왼쪽 축과 눈금 개수를 맞춰 두 축의 숫자가 같은 격자선 위에 놓입니다.