Chartkick은 JavaScript 기반의 간단한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 쉽게 생성하고 관리할 수 있습니다. 이번 블로그 포스트에서는 Chartkick에서 사용 가능한 차트의 툴팁 텍스트 축 범위를 설정하는 방법에 대해 알아보겠습니다.

차트 툴팁 텍스트 축 범위 설정하기

일반적으로 Chartkick에서 차트를 생성하면 데이터 포인트에 대한 툴팁 텍스트를 볼 수 있습니다. 그러나 때로는 툴팁 텍스트에 표시되는 축(축 범위)을 제한하고 싶을 수 있습니다. 이런 경우 Chartkick에서는 옵션을 제공하여 축 범위를 설정할 수 있습니다.

아래는 Chartkick에서 사용 가능한 툴팁 텍스트 축 범위 설정 방법의 예입니다.

<%= line_chart data, library: { scales: { xAxes: [{ ticks: { callback: function(value) { if (value >= 1000) { return (value/1000) + 'k'; } return value; } } }] } } %>

위의 예시에서 우리는 line_chart 함수에 library 옵션을 전달합니다. 그리고 scales 객체를 사용하여 X축에 대한 설정을 지정합니다. xAxes 배열 안에 객체를 추가하고, ticks 속성을 사용하여 툴팁 텍스트가 표시되는 X축의 데이터를 가공할 수 있습니다.

위의 코드에서는 값이 1,000 이상인 경우 값을 1,000으로 나눈 뒤 ‘k’를 추가하여 표시하는 방식을 사용했습니다. 이를 통해 툴팁 텍스트에서 큰 숫자를 더욱 가독성 있게 표현할 수 있습니다.

참고 자료

• Chartkick 공식 문서
• Chartkick GitHub 저장소

위의 자료를 참고하여 더 많은 설정 옵션과 기능을 확인하고 차트를 보다 유연하게 사용할 수 있습니다.