[chart.js] 그래프 hover시 마우스 포인터(v.4.2.1)

 

options: {
    onHover: (event, chartElement) => {
        event.native.target.style.cursor = chartElement.length === 1 ? 'pointer' : 'default';
        // console.log(event);
        // console.log(chartElement);
        // if(chartElement.length === 1) {
        //     event.native.target.style.cursor = 'pointer';
        // } else {

        //     event.native.target.style.cursor = 'default';
        // }
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }

 

- 그래프가 있으면 chartElement.length가 1로 나오기 때문에 1인 경우에만 cursor를 pointer로 설정했다.

- 처음에 if문으로 했지만 삼항연산자로 간단하게 수정하였다.

- cursor를 찾기 위해선 event부터 하나씩 타고 들어가면 됨..

 

***

interaction{

intersect: false로 되어있으면 제대로 안됨! 

}

false로 되어있으면 가까이만 가도 툴팁이 뜨게하는 거기때문에 true로 해서 정확히 그래프 위로 올라갔을 때만 나오게 해야함.

 

 

 

https://www.youtube.com/watch?v=Uj_I2_7o0No