ApexCharts는 멋진 그래프와 차트를 만들기 위해 사용되는 JavaScript 라이브러리입니다. 축 범위는 차트에 표시되는 데이터의 범위를 조정하는 데 사용됩니다. 이를 통해 데이터를 더 명확하게 시각화하고 사용자에게 정보를 전달할 수 있습니다.

X축 범위 설정하기

X축은 차트의 가로 축으로, 주로 시간, 날짜 또는 범주형 데이터를 표시하는 데 사용됩니다. X축의 범위는 xaxis 객체를 사용해 설정할 수 있습니다.

var options = {
  xaxis: {
    min: new Date("2022-01-01"),
    max: new Date("2022-12-31"),
  },
};

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

위의 예시에서는 min 속성과 max 속성을 사용하여 X축의 범위를 설정하였습니다. min 속성은 최소 날짜를, max 속성은 최대 날짜를 나타냅니다. 이렇게 설정하면 차트에 표시되는 X축 범위가 2022년 1월 1일부터 2022년 12월 31일까지로 제한됩니다.

Y축 범위 설정하기

Y축은 차트의 세로 축으로, 주로 수치형 데이터를 표시하는 데 사용됩니다. Y축의 범위는 yaxis 객체를 사용해 설정할 수 있습니다.

var options = {
  yaxis: {
    min: 0,
    max: 100,
  },
};

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

위의 예시에서는 min 속성과 max 속성을 사용하여 Y축의 범위를 설정하였습니다. min 속성은 최소 값, max 속성은 최대 값으로 설정되어 있습니다. 이렇게 설정하면 차트에 표시되는 Y축 범위가 0부터 100까지로 제한됩니다.

참고 자료

• ApexCharts 공식 문서
• ApexCharts GitHub 저장소