[javascript] ApexCharts에서 차트에 축 레이블 회전하기
ApexCharts는 사용하기 쉽고 강력한 JavaScript 차트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 다양한 종류의 차트를 만들 수 있습니다.
만약 ApexCharts를 사용하여 만든 차트에서 축 레이블을 회전하고 싶다면 어떻게 해야 할까요?
답은 xaxis
또는 yaxis
의 labels
속성을 사용하여 축 레이블을 스타일링하는 것입니다. 축 레이블을 회전하기 위해서는 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 문서를 참고하시기 바랍니다.