Chartkick은 데이터 시각화를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 차트를 만들 때, 축 눈금의 회전을 설정하는 방법이 있습니다. 축 눈금을 회전시켜 텍스트가 겹치지 않고 보기 좋게 표시할 수 있습니다.

방법 1: rotate 속성 사용하기

rotate 속성을 사용하여 축 눈금의 회전을 설정할 수 있습니다. 이 속성은 차트의 options 객체에 추가할 수 있습니다. rotate 속성은 도수로 값을 입력받으며, 양수 값은 시계 방향으로 회전하고 음수 값은 반시계 방향으로 회전합니다.

예를 들어, x축의 눈금을 45도 시계 방향으로 회전하려면 다음과 같이 설정할 수 있습니다:

new Chartkick.LineChart("chart", data, { 
  xtitle: "날짜", 
  ytitle: "값", 
  rotate: 45 
});

방법 2: CSS를 사용하여 회전 적용하기

CSS를 사용하여 차트의 축 눈금에 회전 효과를 적용할 수도 있습니다. 차트의 클래스나 ID를 사용하여 CSS 스타일을 적용할 수 있습니다.

예를 들어, x축의 눈금을 45도 시계 방향으로 회전하려면 다음과 같이 CSS 스타일을 추가할 수 있습니다:

#chartid g.x.axis text {
  transform: rotate(45deg);
}

위 코드에서 #chartid는 실제 차트 요소의 ID로 변경해야 합니다.

결론

Chartkick을 사용하여 차트를 만들 때, 축 눈금의 회전을 설정하는 방법에 대해 알아보았습니다. rotate 속성을 사용하거나 CSS를 사용하여 회전을 적용할 수 있습니다. 이를 통해 차트의 축 눈금을 더 보기 좋게 표시할 수 있습니다.

참고 자료:

• Chartkick 공식 문서
• CSS Transform 속성에 대한 MDN 문서