Chartkick은 JavaScript 기반의 간단하고 유연한 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 형식의 차트를 쉽게 생성할 수 있습니다. 이 중에서도 차트의 툴팁, 축, 눈금과 같은 요소들의 형식을 설정하는 방법에 대해 알아보겠습니다.

차트 툴팁 형식 설정하기

차트의 툴팁은 데이터 포인트에 대한 정보를 표시하는 역할을 합니다. 툴팁의 형식을 설정하려면 tooltipOptions 속성을 사용하면 됩니다.

new Chartkick.LineChart("chart", data, {
  tooltipOptions: {
    format: "{value} 단위"
  }
});

위의 예시에서는 format 속성을 사용하여 툴팁의 형식을 설정했습니다. value는 데이터 포인트의 값에 해당하는 부분을 나타냅니다. {value}를 원하는 형태로 수정하여 툴팁의 형식을 변경할 수 있습니다.

축 눈금 형식 설정하기

차트의 축 눈금은 차트 영역에 나타나는 가로 또는 세로 선입니다. 축 눈금의 형식을 설정하려면 library 속성을 사용하여 따로 설정한 후, xAxis 또는 yAxis에 적용하면 됩니다.

new Chartkick.LineChart("chart", data, {
  library: {
    xAxis: {
      tickFormat: function(value) {
        return value + "월";
      }
    },
    yAxis: {
      tickFormat: function(value) {
        return value + "만";
      }
    }
  }
});

위의 예시에서는 tickFormat 함수를 사용하여 축 눈금의 형식을 설정했습니다. value는 축 눈금의 값에 해당하는 부분을 나타냅니다. return 구문을 사용하여 원하는 형태로 눈금의 형식을 변경할 수 있습니다.

이렇게 설정한 후, xAxis와 yAxis에 해당 형식을 적용하기 위해 library 속성을 사용하였습니다.

결론

Chartkick을 사용하면 간단하게 차트를 생성할 수 있습니다. 툴팁의 형식과 축 눈금의 형식을 설정하는 방법을 이해하면 보다 유용하고 다양한 형태의 차트를 구현할 수 있습니다.

참고 문서

• Chartkick 문서
• Chartkick GitHub 저장소