ApexCharts는 훌륭한 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 생성하고 사용자 정의할 수 있습니다. 이번 글에서는 ApexCharts에서 축 설정하는 방법에 대해 알아보겠습니다.

X축 설정

X축은 주로 시간, 날짜, 범주 등을 나타내는 데 사용됩니다. ApexCharts에서 X축을 설정하려면 다음과 같은 방법을 사용할 수 있습니다.

1. X축 유형 설정하기

   var options = {
     xaxis: {
       type: 'datetime'
     }
   };
   
   var chart = new ApexCharts(document.querySelector("#chart"), options);
   chart.render();
   

   xaxis 프로퍼티에 type을 ‘datetime’으로 설정하여 X축의 유형을 날짜/시간으로 지정할 수 있습니다. 이렇게 설정하면 X축 값이 자동으로 날짜/시간 형식으로 표시됩니다.

2. X축 범위 설정하기

   var options = {
     xaxis: {
       min: new Date('2021-01-01').getTime(),
       max: new Date('2021-12-31').getTime()
     }
   };
   
   var chart = new ApexCharts(document.querySelector("#chart"), options);
   chart.render();
   

   xaxis 프로퍼티의 min과 max 속성을 사용하여 X축의 범위를 지정할 수 있습니다. 위 예제에서는 X축을 2021년 1월 1일부터 2021년 12월 31일까지로 설정했습니다.

Y축 설정

Y축은 데이터 값의 범위를 나타내는 데 사용됩니다. ApexCharts에서 Y축을 설정하려면 다음과 같은 방법을 사용할 수 있습니다.

1. Y축 범위 설정하기

   var options = {
     yaxis: {
       min: 0,
       max: 100
     }
   };
   
   var chart = new ApexCharts(document.querySelector("#chart"), options);
   chart.render();
   

   yaxis 프로퍼티의 min과 max 속성을 사용하여 Y축의 범위를 지정할 수 있습니다. 위 예제에서는 Y축을 0부터 100까지의 범위로 설정했습니다.

2. Y축 라벨 설정하기

   var options = {
     yaxis: {
       labels: {
         formatter: function(value) {
           return value + "%";
         }
       }
     }
   };
   
   var chart = new ApexCharts(document.querySelector("#chart"), options);
   chart.render();
   

   yaxis 프로퍼티의 labels 속성을 사용하여 Y축의 라벨을 설정할 수 있습니다. 위 예제에서는 Y축 값에 “%” 문자를 추가하는 방식으로 라벨을 지정했습니다.

위의 예제 코드를 사용하여 ApexCharts에서 축을 설정할 수 있습니다. 이를 통해 차트의 X축과 Y축을 원하는대로 사용자 정의할 수 있습니다.

참고 자료:

• ApexCharts 공식 문서