Chartist는 JavaScript로 작성된 간단하고 유연한 차트 라이브러리입니다. 이 라이브러리를 사용하여 차트를 생성하고 축 레이블을 설정하는 것이 가능합니다. 이번 글에서는 Chartist에서 축 레이블의 회전 기능을 활용하는 방법에 대해 알아보겠습니다.

축 레이블 회전하기

축 레이블을 회전시키기 위해서는 Chartist의 axisX 또는 axisY 객체에 labelInterpolationFnc 속성을 추가해야 합니다. 이 속성은 축 레이블을 렌더링하기 위한 함수를 정의하는데, 우리는 이 함수에서 레이블을 회전시키면 됩니다.

JavaScript 코드 예시:

var chart = new Chartist.Line('.chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    [5, 2, 4, 2, 0]
  ]
}, {
  axisX: {
    labelInterpolationFnc: function(value, index) {
      // 레이블을 수직으로 회전시키기 위해 CSS를 추가합니다.
      return '<span style="transform: rotate(-45deg)">' + value + '</span>';
    }
  }
});

위의 예시 코드에서는 axisX 객체에 labelInterpolationFnc 속성을 추가하여 레이블을 설정하고 있습니다. 이 함수 안에서는 CSS를 사용하여 레이블을 -45deg만큼 회전시킵니다.

차트 옵션과 스타일 조정

축 레이블을 회전시키는 것 외에도, Chartist에서는 다양한 옵션과 스타일을 사용하여 차트를 더욱 맞춤화할 수 있습니다. Chartist의 공식 문서에서 제공하는 옵션과 스타일 설정에 대해 더 자세히 알아보세요.

• Chartist 공식 문서: https://gionkunz.github.io/chartist-js/

이렇게 직접적인 방법으로 Chartist에서 차트의 축 레이블을 회전시킬 수 있습니다. 이 기능을 활용하여 더욱 다양한 차트를 만들어 보세요!