[Vue.js] Chart.js labels hover 시 데이터(tooltip) 보이기

Chart.js 에서 기본적으로

해당 막대/차트 위에 마우스를 올려야 tooltp 이 보인다.

그런데 위와 같이 June 은 8000건 이상이고 January 는 10건일때 범위 차이가 너무 커져서

막대위에 정확히 마우스를 올리기 쉽지 않다.

이 상태는 사용성이 너무 떨어져서

January 라벨 위에 마우스를 올렸을때도 tooltip이 보이도록

즉, 각 라벨위에 hover 가 동작하도록 변경하려고 한다.

options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
}

간단하게 options 에 이렇게 추가하면 된다.
chart.js Document 에 다음과 같이 설명하고 있다.

설정이 true 이면 intersect첫 번째 교차 항목이 데이터의 인덱스를 결정하는 데 사용됩니다. false인 경우 intersectx 방향에서 가장 가까운 항목이 인덱스를 결정하는 데 사용됩니다.

즉 기본값은 intersect 가 true 로 되어있고 false 로 변경해야
교차 항목이 아닌 x 축 전체를 인덱스로 인식해서 동작한다.

이제 라벨 위에 마우스를 올려도 tooltip 으로 데이터를 쉽게 확인 할 수 있다.

참고로 chart.js 2.x 버전일때 동작하는 코드이다. 아래 참조한 stackoverflow 에 자세한 설명이 되어있다.

참조
Chart.js - Hover labels to display data for all data points on x-axis
Chart.js Document interactions