[javascript] Highcharts에서 툴팁 설정하기

27 Nov 2023

javascript

Highcharts는 JavaScript 기반의 인기 있는 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 만들고 표시할 수 있습니다. 이 글에서는 Highcharts에서 툴팁을 설정하는 방법에 대해 알아보겠습니다.

툴팁이란?

툴팁은 사용자가 특정 요소 위에 마우스를 올렸을 때 표시되는 작은 정보 박스입니다. 차트에서는 데이터 포인트나 축 등과 관련된 추가 정보를 툴팁으로 표시할 수 있습니다.

Highcharts에서 툴팁 설정하기

Highcharts에서 툴팁을 설정하려면 tooltip 개체를 사용하여 여러 속성을 설정해야 합니다. 이 개체를 사용하면 툴팁의 모양과 동작을 커스터마이즈할 수 있습니다. 아래는 일반적인 툴팁 설정의 예입니다.

Highcharts.chart('container', {
    // ... 차트 옵션 설정
    tooltip: {
        backgroundColor: '#ffffff',
        borderColor: '#000000',
        borderRadius: 5,
        borderWidth: 1,
        formatter: function () {
            return 'X 값: ' + this.x + '<br>' +
                'Y 값: ' + this.y;
        }
    },
    // ... 데이터 및 시리즈 설정
});

위 예제에서는 backgroundColor, borderColor, borderRadius, borderWidth 등의 속성을 사용하여 툴팁의 모양을 설정하였습니다. 또한 formatter 함수를 사용하여 툴팁의 텍스트를 동적으로 생성하였습니다. this.x와 this.y를 사용하여 데이터 포인트의 X 좌표와 Y 좌표를 가져와서 텍스트로 표시하였습니다.

추가 옵션

Highcharts에서는 툴팁에 대한 다양한 추가 옵션을 제공합니다. 일부 중요한 옵션은 다음과 같습니다.

enabled: 툴팁의 활성화 여부를 설정합니다. 기본값은 true입니다.
shared: 여러 시리즈의 데이터 포인트를 포함하는 툴팁을 사용할지 여부를 설정합니다. 기본값은 false입니다.
crosshairs: 현재 마우스 위치에 교차선을 표시하는지 여부를 설정합니다.
followPointer 및 followTouchMove: 마우스 포인터 또는 터치 이동에 따라 툴팁을 따라가는지 여부를 설정합니다.

이 외에도 다양한 툴팁 옵션을 사용하여 원하는대로 툴팁을 커스터마이즈할 수 있습니다.

참고 자료

이제 Highcharts에서 툴팁을 설정하는 방법에 대해 알아보았습니다. 원하는 스타일과 동작을 가진 툴팁을 만들어 차트에 적용해보세요!