[프로젝트] Highcharts column 차트 tooltip 커스텀하기!

✔️ tooltip 커스텀 전과 후 비교

---

Highcharts로 column차트를 만들었어요!
처음에 tooltop option으로 share: true를 줘서
아래 이미지처럼 하나의 시리즈 안에 2개의 차트가 생성될 경우
tooltip에 모든값이 노출되도록 만들어 놨었습니다.

하지만 실제 프로젝트에서는 항목이 많기 때문에,
모든 항목이 하나의 툴팁에서 모두 보이게 하는 것은 시각적으로 깔끔하지 않다고 생각이 들더라구요!

이를 해결하고자
차트에 마우스를 올려놨을 때 해당 차트에 들어있는 데이터값들만 보이게 하자! 로 결정했고
이를 위해 Highcharts tooltip 커스텀을 진행하게 되었어요!
( 이번 프로젝트는 Highcharts 커스텀과의 싸움인거 같아요 😂 )

---

✔️ tooltip option 커스텀하기

원하는 방향으로 옵션을 커스텀하기 위해 하루종일 구글링을 했던거 같아요.

해결책을 찾은 날이 저녁에 술마신날이었는데 ㅋㅋ
회사에서 해결책 찾지 못하고 퇴근하니 너무 찝찝해서
술마시고 집에와서 엄청 구글링을 했었던 기억이 있어요 ㅋㅋㅋㅋ
비슷한 문제를 해결한 사례를 찾자마자 맘편히 잠들었던 기억이 있네요 😂

해결한 코드 공유드립니다.

JSFiddle로 확인하기 > https://jsfiddle.net/349ukLer/

tooltip: {
formatter: function () {
  let thisPoint = this.point; // 현재 툴팁이 형식화 되는 데이터 포인트
  let allSeries = this.series.chart.series; // 모든 시리즈 데이터
  let thisIndex = thisPoint.index; // 현재 데이터 포인트의 인덱스
  let returnString = '';// 형식화 된 툴팁 내용을 누적하는 문자열 변수
  allSeries.forEach((ser) => {
    if (ser.options.stack === thisPoint.series.options.stack) {
      if (ser.points[thisIndex]?.y) {
          returnString += `<span style="color:${ser.color}">●</span> ${
      ser.name
    }: <b>${ser.points[thisIndex]?.y} 원</b><br/>`;
}
}
});
return returnString;
}, 
}

series: [
    {
        name: 'TEST',
        data: [5, 5, 5, 5],
        stack: 'A'
    },
    {
        name: 'TESTA',
        data: [3, 5, 1, 13],
        stack: 'B'
    }, {
        name: 'TESTC',
        data: [14, 8, 8, 12],
        stack: 'B'
    }, {
        name: 'TESTB',
        data: [0, 2, 6, 3],
        stack: 'B'
    }]

1. 시리즈 반복

allSeries.forEach((ser) => {

이 코드는 forEach 메서드를 사용하여 차트의 각 시리즈를 반복합니다.

2. 시리즈 스택 확인

if (ser.options.stack === thisPoint.series.options.stack) {

series에 들어간 배열데이터를 확인해보면 stack이라는 키가 있습니다.
stack을 이용해 현재 시리즈가 현재 데이터 포인트의 시리즈와 동일한 스택에 속하는지 확인합니다.

3. 데이터 포인트 형식 지정

if (ser.points[thisIndex]?.y) {
returnString += <span style="color:${ser.color}">●</span> ${ser.name}: <b>${ser.points[thisIndex]?.y} 원</b><br/>;
}

현재 시리즈가 현재 인덱스(thisIndex)에서 유효한 데이터 포인트를 가지고 있는지 확인하고 유효한 데이터 포인트가 존재하면 returnString에 원하는 형식의 html 태그를 추가합니다.

---

Highcharts를 커스텀하는 일이 빈번하게 발생하는데,
제가 겪었던 문제와 유사한 상황을 해결하고자 했던 글을 찾는 데 꽤 오랜 시간이 걸렸습니다 ㅠ.

제가 찾은 해결책이 다른 누군가에게 도움이 되기를 바라며, 이런 문제에 대한 해결책을 찾는 데 소요되는 시간이 더 단축되길 희망합니다! 😊