[javascript] ApexCharts에서 차트에 축 레이블 회전하기

ApexCharts는 사용하기 쉽고 강력한 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 다양한 종류의 차트를 만들 수 있습니다.

만약 ApexCharts를 사용하여 만든 차트에서 축 레이블을 회전하고 싶다면 어떻게 해야 할까요?

답은 xaxis 또는 yaxislabels 속성을 사용하여 축 레이블을 스타일링하는 것입니다. 축 레이블을 회전하기 위해서는 rotate 속성을 설정해주면 됩니다.

아래는 예시 코드입니다.

var options = {
  chart: {
    type: 'bar',
    height: 380,
    width: '100%',
  },
  xaxis: {
    categories: ['옵션1', '옵션2', '옵션3', '옵션4', '옵션5'],
    labels: {
      rotate: -45,
    },
  },
  yaxis: {
    min: 0,
    max: 100,
  },
};

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

위 코드는 바 차트를 만들고 x축 레이블을 회전하여 보여줍니다. rotate 속성은 각도에 따라 레이블을 회전시키는데, 양수 값은 시계방향으로 회전하고 음수 값은 반시계방향으로 회전합니다.

다양한 각도로 레이블을 회전시킬 수 있으며, 자신의 요구에 맞게 조정할 수 있습니다.

자세한 내용은 ApexCharts 문서를 참고하시기 바랍니다.