ApexCharts는 JavaScript 기반의 매우 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 생성하고 다양한 설정을 적용할 수 있습니다. 이번에는 ApexCharts에서 차트 라벨을 회전하는 방법에 대해 알아보겠습니다.

ApexCharts에서 라벨 회전 설정하기

라벨을 회전시키려면 xaxis 객체에서 labels 속성을 사용해야 합니다. 이 속성에는 여러 가지 라벨 설정이 가능한데, 여기에 rotate 옵션을 사용하여 라벨의 회전 각도를 설정할 수 있습니다.

아래는 ApexCharts에서 라벨 회전 설정을 적용하는 예제 코드입니다.

var options = {
  chart: {
    type: 'bar',
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }],
  xaxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September'],
    labels: {
      rotate: -45
    }
  }
}

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

위의 예제에서는 xaxis.labels.rotate 속성을 -45로 설정하여 라벨을 왼쪽으로 45도 회전하도록 설정했습니다.

추가 설정

앞서 언급한 rotate 속성 외에도 ApexCharts에서 라벨을 더욱 자세하게 조절할 수 있는 다양한 옵션들이 있습니다. 이를 통해 라벨 길이, 위치, 크기 등을 조절할 수 있습니다. 자세한 내용은 ApexCharts 문서를 참고하세요.

마무리

ApexCharts에서 차트 라벨을 회전시키는 방법에 대해 알아보았습니다. xaxis.labels.rotate 속성을 사용하여 간단하게 라벨의 회전 각도를 설정할 수 있습니다. 더 많은 라벨 설정 옵션을 활용하여 차트의 라벨을 더욱 미려하게 조절할 수도 있습니다.