[javascript] Chartkick에서 사용 가능한 차트 축 레이블 회전 설정 방법
Chartkick은 JavaScript로 작성된 간단하고 직관적인 차트 라이브러리입니다. 차트 축의 레이블을 회전하여 더 많은 텍스트를 표시하고 가독성을 높일 수 있습니다. 이 문서에서는 Chartkick에서 사용 가능한 차트 축 레이블 회전 설정 방법에 대해 알아보겠습니다.
1. 옵션을 통한 회전 설정
Chartkick에서 축 레이블 회전을 설정하려면 options 객체에 axisTextRotation 속성을 추가해야 합니다.
이 속성의 값을 0에서 90 사이의 각도로 설정할 수 있으며, 0으로 설정하면 회전하지 않고 수평으로 표시됩니다.
new Chartkick.LineChart("chart", data, {
axisTextRotation: 45
});
위의 예제에서는 축 레이블이 45도로 회전하여 표시됩니다.
2. CSS 스타일을 통한 회전 설정
Chartkick 차트 요소에 직접 CSS 스타일을 적용하여 축 레이블을 회전시킬 수도 있습니다.
각 차트 유형에 해당하는 CSS 클래스를 선택하여 transform 속성을 사용하여 회전 각도를 지정합니다.
#chart .axis-x text {
transform: rotate(45deg);
}
위의 예제에서는 axis-x 클래스를 가진 요소에 45도로 회전하는 스타일이 적용됩니다.
참고 자료
이 문서에서는 Chartkick에서 차트 축 레이블을 회전하는 두 가지 방법에 대해 알아보았습니다. 여러분은 이러한 기능을 활용하여 가독성을 향상시키고 더 많은 정보를 시각화할 수 있습니다.