[Next.js] Chart.js 라이브러리로 구현한 도넛 차트의 tooltip이 말썽을 부린다.

바야흐로 2022년 4월 6일 입사 입사 1달 하고도 10일 조금 넘은 신입사원이였던 나는 Chart.js 라이브러리로 차트를 구현 했었다. 이때는 몰랐다. 한달 뒤 이런 문제가 발견 될 줄은.. 😥😥

[Next.js] Chart.js

 

처음에는 뭐가 문제인 지 모르겠어서 Chart.js 공식문서만 뚫어져라 쳐다 보다가 기존 코드의 살들을 하나씩 떼어가고 있었는 데 options의 interaction을 지웠더니 해결 되어 버렸다.

---

🤔 기존 코드(수정 전)

<Doughnut
    type="doughnut"
    options={{
      interaction: {
        intersect: false,
        mode: "index",
      },
      cutoutPercentage: 100,
      legend: {
        position: "right",
      },
      plugins: {
        // 카테고리 커스텀
        legend: {
          display: false,
        },
        // 제목 커스텀
        title: {
          display: false,
          text: "Chart.js Line Chart - External Tooltips",
        },
        // 툴팁 커스텀
        tooltip: {
          enabled: false,
          position: "nearest",
          external: externalTooltipHandler,
        },
      },
    }}
    data={expData}
    height={120}
/>

 

🤔 변경 코드(수정 후)

<Doughnut
    type="doughnut"
    options={{
      cutoutPercentage: 100,
      legend: {
        position: "right",
      },
      plugins: {
        // 카테고리 커스텀
        legend: {
          display: false,
        },
        // 제목 커스텀
        title: {
          display: false,
          text: "Chart.js Line Chart - External Tooltips",
        },
        // 툴팁 커스텀
        tooltip: {
          enabled: false,
          position: "nearest",
          external: externalTooltipHandler,
        },
      },
    }}
    data={expData}
    height={120}
/>

 

😮 달라진 부분 (options 안에 있던 코드) 

: 나는 첫번째 방법으로 수정 했는 데 추후에 intersect를 true로 바꿔도 동일한 결과를 얻을 수 있다는 걸 알게 되었다.

interaction: {
    intersect: false,
    mode: "index",
},

-> 삭제 해버리기

interaction: {
    intersect: true,
    mode: "index",
},

---

공식문서에 따르면 interaction은 차트 상호 작용을 트리거 하는 이벤트이면서 아래 속성을 추가 할 수 있다고 한다.

Interactions | Chart.js

 

Name	Type	Default	Description
mode	string	'nearest'	상호작용을 표시 할 항목을 설정한다. 총 5가지의 mode가 있다 (mode, nearest, index, dataset, x, y) * 자세한 설명과 예제는 아래에서 *
intersect	boolean	true	true인 경우 상호작용 모드는 마우스 위치가 차트의 항목과 교차 할 때만 적용된다.
axis	string	'x'	'x' 또는 'y'로 설정하여 거리 계산에 사용되는 방향을 설정 할 수 있다.

 

[mode 종류]

🥕 point : 점과 교차하는 모든 항목을 찾습니다.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'point'
        }
    }
});

 

🥕 nearest : 포인터에서 가장 가까운 거리에 있는 항목을 가져옵니다. 가장 가까운 항목은(점, 막대)의 중심까지의 거리를기준으로 결정됩니다. axis 설정을 사용하여 거리 계산에서 고려 되는 좌표를 정의 할 수 있습니다.

true이면 intersect 마우스 위치가 그래프의 항목과 교차 할 때만 트리거 됩니다.

(점이 막대 뒤에 숨겨진 콤보 차트에 유용)

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'nearest'
        }
    }
});

 

🥕 index : 동일한 index에서 항목을 찾습니다. 설정이 true이면 intersect 첫번째 교차 항목이 데이터의 인덱스를 결정하는 데 사용됩니다. false인 경우 intersect x 방향에서 가장 가까운 항목이 index를 결정하는 데 사용됩니다.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'index'
        }
    }
});

 

y 방향을 따라 검색하는 가로 막대 차트에서 인덱스 모드를 사용하려면 axis에 도입된 설정을 사용 할 수 있습니다.

axis: 'y' 속성을 사용하면 y 방향으로 설정하여 사용 가능합니다.

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        interaction: {
            mode: 'index',
            axis: 'y'
        }
    }
});

 

🥕 dataset : 동일한 dataset에서 항목을 찾습니다. true이면 intersect 첫번째 교차 항목이 데이터의 인덱스를 결정 하는 데 사용됩니다. false인 경우 intersect 가장 가까운 항목이 인덱스를 결정하는 데 사용 됩니다.

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'dataset'
        }
    }
});

 

🥕 x : x 위치의 좌표만을 기준으로 교차하는 모든 항목을 반환합니다. (수직 커서 구현에 유용하고 데카르트 차트에서만 적용됩니다.)

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'x'
        }
    }
});

 

🥕 y : y 위치의 좌표를 기준으로 교차하는 모든 항목을 반환합니다. (수평 커서 구현에 유용하고 데카르트 차트에서만 적용 됩니다.)

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        interaction: {
            mode: 'y'
        }
    }
});