문서 › 차트 종류

콤보 (막대+선)

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

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

움직이는 예제

이 예제의 코드

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' 를 쓰지 않으면 지금까지와 똑같이 축이 하나입니다.

움직이는 예제

이 예제의 코드

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)에서는 쓸 수 없습니다.