[javascript] Chartkick에서 사용 가능한 툴팁 설정 방법

29 Nov 2023

javascript

Chartkick은 웹 페이지에 다양한 종류의 차트를 쉽게 생성해주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 데이터 시각화 작업을 간편하게 수행할 수 있습니다.

차트에 툴팁을 추가하면 데이터의 상세 정보를 사용자에게 제공할 수 있습니다. Chartkick에서는 툴팁 기능을 지원하며, 이를 설정하는 방법에 대해서 알아보겠습니다.

Chartkick 툴팁 사용하기

Chartkick에서 툴팁을 사용하기 위해서는 차트를 생성할 때 옵션으로 tooltip 객체를 추가해야 합니다. tooltip 객체에는 다양한 설정 옵션들을 지정할 수 있습니다.

아래는 Chartkick에서 툴팁을 설정하는 예제 코드입니다:

new Chartkick.LineChart("chart", {
  tooltip: {
    enabled: true,
    formatter: function (value) {
      return "Value: " + value;
    }
  },
  data: [
    {"2010-01-01": 10, "2010-02-01": 20, "2010-03-01": 15},
    {"2010-01-01": 5, "2010-02-01": 10, "2010-03-01": 8}
  ]
});

위 예제 코드에서 tooltip 객체의 enabled 속성을 true로 설정하면 툴팁이 활성화됩니다. 그리고 formatter 함수를 통해 툴팁의 내용을 지정할 수 있습니다. 위 예제에서는 툴팁의 내용으로 “Value: “와 해당 값이 표시됩니다.

위 예제 코드는 LineChart를 예로 들었지만, 실제로 다른 차트 유형에서도 동일한 방법으로 툴팁을 설정할 수 있습니다.

Chartkick 툴팁 사용하기

참고 자료