[javascript] ApexCharts에서 차트 축 반전하기

30 Nov 2023

javascript

ApexCharts는 강력한 자바스크립트 차트 라이브러리로, 다양한 종류의 차트를 생성할 수 있습니다. 이 라이브러리를 사용하여 차트의 축을 반전시키는 방법을 알아보겠습니다.

차트 생성하기

먼저, ApexCharts를 사용하여 기본 차트를 생성하는 방법을 알아보겠습니다. 아래의 예제 코드를 참고해주세요.

// HTML 파일
<div id="chart"></div>

// 자바스크립트 파일
var options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월']
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

위의 코드는 간단한 선 그래프 차트를 생성하는 예제입니다. x축은 월별 카테고리이며, y축은 매출 데이터를 나타냅니다.

축 반전하기

이제 차트의 y축을 반전시켜보겠습니다. ApexCharts에서는 yaxis 객체의 reversed 속성을 사용하여 축을 반전시킬 수 있습니다. 아래의 예제 코드를 참고해주세요.

// 자바스크립트 파일
var options = {
  chart: {
    type: 'line',
    height: 350
  },
  series: [{
    name: 'sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월']
  },
  yaxis: {
    reversed: true
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

위의 코드에서 yaxis 객체에 reversed: true를 추가하여 y축을 반전시킵니다.

이제 차트를 다시 실행하면 y축이 반전된 것을 확인할 수 있습니다.

결론

ApexCharts를 사용하여 차트의 축을 반전시킬 수 있습니다. yaxis 객체의 reversed 속성을 사용하여 축을 반전시키는 방법을 알아보았습니다. 추가적으로 ApexCharts에는 다양한 설정 옵션이 있으니 필요에 따라 참고하시기 바랍니다.

참고 자료

ApexCharts 공식 문서