문서 › 차트 종류

폭포 차트

매출에서 영업이익까지: 늘고 준 만큼을 이어 그리고 합계 막대로 정리.

type: 'waterfall' 은 값을 증감으로 읽어 앞 막대가 끝난 곳에서 다음 막대를 시작합니다. { total: true } 점은 0부터 서는 합계 막대로, y 를 빼면 그때까지의 누계를, y 를 주면 그 값을 씁니다(시작 값은 { y: 1250e8, total: true }). 막대 사이는 점선으로 잇고, 막대마다 값(+35억원, -260억원)을 적습니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'waterfall',
  title: '영업이익 분석',
  subtitle: '2026년 3분기',
  unit: '원',
  data: {
    labels: ['매출액', '매출원가', '매출총이익', '판관비', '기타수익', '영업이익'],
    series: [{ name: '금액', data: [{ y: 1250e8, total: true }, -780e8, { total: true }, -260e8, 35e8, { total: true }] }],
  },
});

색: 기본(deltaColors: 'semantic')은 증가 초록·감소 빨강, deltaUpIsGood: false 면 반대, deltaColors: 'korea' 면 증가 빨강·감소 파랑. 합계 막대는 회색(시리즈 color 를 주면 그 색).
툴팁은 증감과 그 뒤의 누계를 보여 줍니다. 데이터 표와 CSV 의 합계 칸에는 계산된 합계가 들어갑니다.
값 라벨은 기본으로 켜져 있고, 칸보다 넓은 라벨은 생략합니다. dataLabels: false 로 끄고, true 면 항상 적습니다.