# 막대 차트

> 묶음, 누적, 100% 누적, 가로, 음수 막대.

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

막대 차트(막대 그래프)란 항목마다의 값을 막대의 길이로 나타내 크기를 비교하는 차트입니다. 세로 막대는 기간별 비교에, 가로 막대는 이름이 긴 항목이나 순위에 많이 씁니다.

`type: 'bar'` 는 시리즈가 여러 개면 나란히 묶어 그립니다. 막대 끝은 둥글고(`barRadius`, 기본 6) 기준선 쪽은 각져 있습니다. 막대 위에 마우스를 올리면 그 칸 전체가 옅게 칠해지고 그 칸의 모든 값이 툴팁에 나옵니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '분기별 매출',
  unit: '원',
  data: {
    labels: ['1분기', '2분기', '3분기', '4분기'],
    series: [
      { name: '2025', data: [182000000, 205000000, 198000000, 241000000] },
      { name: '2026', data: [214000000, 236000000, 251000000, null] },
    ],
  },
});
```

## 누적과 합계

`stacked: true` 면 모든 막대 시리즈가 한 묶음으로 쌓이고, `stackTotals: true` 는 막대 위에 합계를 적습니다. 시리즈마다 `stack: '이름'` 을 주면 묶음을 여러 개로 나눌 수 있습니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '연령·성별 가입자',
  stacked: true,
  stackTotals: true,
  unit: '명',
  data: {
    labels: ['10대', '20대', '30대', '40대', '50대 이상'],
    series: [
      { name: '여성', data: [820, 4210, 3880, 2140, 960] },
      { name: '남성', data: [640, 3650, 4120, 2530, 1180] },
    ],
  },
});
```

## 가로 막대 (순위)

이름이 긴 항목, 순위표(상품 TOP 10)는 `horizontal: true` 가 읽기 쉽습니다. 큰 값부터 정렬해서 넘기세요. `dataLabels: true` 는 막대 끝에 값을 붙입니다.

```js
createChart('#chart', {
  type: 'bar',
  horizontal: true,
  title: '많이 팔린 상품',
  unit: '개',
  dataLabels: true,
  data: {
    labels: ['무선 이어폰', '보조배터리 10000mAh', 'C타입 충전 케이블', '휴대폰 거치대', '노트북 파우치'],
    series: [{ name: '판매량', data: [1840, 1520, 1310, 980, 760] }],
  },
});
```

## 100% 누적

`stacked: 'percent'` 는 칸마다 합을 100%로 맞춥니다. 설문 응답처럼 비율이 중요할 때 씁니다.

## 음수 막대

증감처럼 음수가 섞이면 0 기준선 아래로 그립니다. `negativeColor` 로 음수 막대 색을 따로 주거나, `palette: 'korea'` 를 쓰면 증권 앱처럼 오르면 빨강, 내리면 파랑입니다.

```js
createChart('#chart', {
  type: 'bar',
  title: '전월 대비 증감',
  unit: '%',
  palette: 'korea',
  data: {
    labels: ['5월', '6월', '7월', '8월', '9월', '10월'],
    series: [{ name: '증감률', data: [4.2, -1.8, 6.5, -3.1, 2.4, 8.9] }],
  },
});
```

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `horizontal` | false | 가로 막대 |
| `stacked` | false | `true` 또는 `'percent'` |
| `stackTotals` | false | 쌓은 막대 위에 합계 |
| `dataLabels` | false | 막대 끝에 값 (`true` 또는 `'end'`) |
| `barRadius` | 6 | 값 쪽 끝 둥글기(px) |
| `barWidth` | 0.82 (묶음 0.78) | 칸 너비 중 막대 묶음이 차지하는 비율(0–1) |
| `negativeColor` | - | 0보다 작은 막대 색 |
| `gradient` | true | 막대에 옅은 세로 그라디언트 |

## 자주 묻는 질문

### 가로 막대 그래프는 어떻게 만드나요?

`horizontal: true` 를 주면 됩니다. 순위표라면 큰 값부터 정렬해서 넘기고, `dataLabels: true` 로 막대 끝에 값을 붙이면 읽기 쉽습니다.

### 누적 막대 그래프와 합계 표시는?

`stacked: true` 로 시리즈를 쌓고 `stackTotals: true` 로 막대 위에 합계를 적습니다. 비율로 보려면 `stacked: 'percent'` 입니다.

### 막대 위에 값(라벨)을 표시하려면?

`dataLabels: true` 입니다. 숫자 모양은 축과 같은 규칙(한국어 페이지는 만·억)을 따르고, 툴팁에는 정확한 숫자가 나옵니다.