문서 › 차트 종류

막대 차트

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

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

움직이는 예제

이 예제의 코드

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: '이름' 을 주면 묶음을 여러 개로 나눌 수 있습니다.

움직이는 예제

이 예제의 코드

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 는 막대 끝에 값을 붙입니다.

움직이는 예제

이 예제의 코드

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' 를 쓰면 증권 앱처럼 오르면 빨강, 내리면 파랑입니다.

움직이는 예제

이 예제의 코드

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	막대에 옅은 세로 그라디언트