chart
English시작하기

문서 › 숫자와 모양

축 다루기

정수 눈금, 눈금 간격, 축 뒤집기(순위), 두 줄 라벨, 오른쪽 y축.

축 옵션은 xAxis · yAxis (오른쪽 축은 y2Axis) 에 넣습니다. 가로 막대에서도 값 축의 옵션은 yAxis 입니다.

정수 눈금과 눈금 간격

건수·인원처럼 소수가 없는 값은 integer: true 로 0.5 같은 눈금을 막습니다. step 은 눈금 사이를 고정합니다(예: 10 단위). 눈금이 200개를 넘을 만큼 작은 step 은 무시하고 자동으로 정합니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'bar',
  title: '요일별 문의',
  unit: '건',
  yAxis: { integer: true },
  data: {
    labels: ['월', '화', '수', '목', '금'],
    series: [{ name: '문의', data: [2, 3, 1, 3, 2] }],
  },
});

축 뒤집기 (순위)

yAxis: { reverse: true } 는 값 축을 뒤집어 작은 값이 위로 갑니다. 1위가 맨 위에 오는 순위 차트에 씁니다. 가로 막대에서는 카테고리 순서가 뒤집혀 첫 항목이 맨 아래로 갑니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'line',
  title: '검색 순위',
  yAxis: { reverse: true, integer: true, min: 1, title: '순위' },
  data: {
    labels: ['1주', '2주', '3주', '4주', '5주'],
    series: [
      { name: '우리 상품', data: [8, 5, 3, 2, 1] },
      { name: '경쟁 상품', data: [1, 2, 2, 4, 6] },
    ],
  },
});

두 줄 라벨

카테고리 라벨에 '\n' 을 넣으면 두 줄로 적습니다. "서울특별시 강남구" 같은 긴 이름에 좋습니다. 툴팁과 표에서는 한 줄로 이어 적습니다.

움직이는 예제

이 예제의 코드

createChart('#chart', {
  type: 'bar',
  title: '구별 매장 수',
  unit: '곳',
  data: {
    labels: ['서울특별시\n강남구', '서울특별시\n송파구', '부산광역시\n해운대구', '대구광역시\n수성구'],
    series: [{ name: '매장', data: [42, 35, 28, 19] }],
  },
});

오른쪽 y축

단위가 다른 시리즈는 axis: 'right' 로 오른쪽 축에 둘 수 있습니다. 주의할 점과 예는 콤보 차트에 있습니다.

옵션설명
integer정수 눈금만
step눈금 간격 고정
reverse값 축 뒤집기 (가로 막대: 카테고리 순서)
unit / prefixy2Axis 전용: 오른쪽 축과 그 시리즈의 단위