[javascript] ApexCharts에서 차트에 툴팁 템플릿 설정하기

30 Nov 2023

javascript

ApexCharts는 인기있는 JavaScript 차트 라이브러리입니다. 차트에 정보를 표시하는 툴팁은 사용자에게 추가적인 컨텍스트를 제공하고 데이터를 시각적으로 이해하기 쉽게 도와줄 수 있는 중요한 요소 중 하나입니다. 이번 글에서는 ApexCharts에서 차트에 사용자 지정 툴팁 템플릿을 설정하는 방법을 알아보겠습니다.

1. 툴팁 템플릿 생성하기

먼저, 툴팁에 표시할 내용을 포함한 템플릿을 생성해야 합니다. ApexCharts에서는 tooltip.custom 속성을 사용하여 툴팁의 내용을 사용자 정의할 수 있습니다. 다음은 간단한 예시입니다.

tooltip: {
  custom: function({ series, seriesIndex, dataPointIndex, w }) {
    return '<div class="custom-tooltip">' +
      '<span class="tooltip-title">' + series[seriesIndex].name + '</span>' +
      '<span class="tooltip-value">' + series[seriesIndex][dataPointIndex] + '</span>' +
    '</div>'
  }
}

위의 예시에서는 custom 함수를 정의하고 해당 함수 내에서 툴팁에 표시할 내용을 HTML 형식으로 반환하도록 구현하였습니다. 이 함수에서는 series 배열을 통해 시리즈의 정보에 접근하고, seriesIndex와 dataPointIndex를 사용하여 특정 데이터 포인트의 값을 가져올 수 있습니다.

2. 차트에 툴팁 템플릿 적용하기

툴팁 템플릿을 생성했다면 이제 해당 템플릿을 차트에 적용해야 합니다. ApexCharts에서는 options 객체를 사용하여 차트 설정을 지정할 수 있습니다. 툴팁 템플릿을 적용하기 위해서는 options.tooltip 속성에 생성한 템플릿을 할당해야 합니다.

var options = {
  tooltip: {
    custom: function({ series, seriesIndex, dataPointIndex, w }) {
      // 툴팁 템플릿 반환
    }
  },
  // 다른 차트 옵션 설정
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

위의 코드에서는 options 객체 내에 tooltip 속성을 정의하고, 해당 속성에 앞서 생성한 툴팁 템플릿을 할당하였습니다. 그리고 ApexCharts 생성자를 사용하여 차트를 만들고 render 메서드를 호출하여 차트를 화면에 렌더링합니다.

3. 스타일링하기

마지막으로, 툴팁에 스타일을 적용하여 원하는 디자인을 구현할 수 있습니다. 위의 예시에서는 툴팁 요소에 custom-tooltip, tooltip-title, tooltip-value 클래스를 추가하였습니다. 이 클래스들을 CSS 스타일시트에서 활용하여 툴팁을 스타일링할 수 있습니다.

.custom-tooltip {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}

.tooltip-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.tooltip-value {
  color: #888;
}

위의 CSS 코드에서는 custom-tooltip 클래스에 배경색, 테두리, 패딩 및 테두리의 반경 등의 스타일을 지정하였습니다. 또한, tooltip-title 클래스에는 툴팁 제목에 대한 스타일을 지정하고, tooltip-value 클래스에는 툴팁 값에 대한 스타일을 지정하였습니다.

결론

이제 ApexCharts에서 차트에 툴팁 템플릿을 설정하는 방법을 살펴보았습니다. 툴팁은 사용자에게 추가 정보를 제공하고 데이터를 시각적으로 이해하기 쉽게 도와주므로, 툴팁 템플릿을 사용하여 사용자 정의된 툴팁을 만들어보세요. ApexCharts의 다양한 기능을 사용하여 멋진 차트를 만들어보세요!

참고 자료

ApexCharts 공식 문서