Chart.jsでツールチップ表示時にイベント処理したい
Chart.js でグラフを作成していて、グラフ上の点（Point）をクリックした時に、そのデータを使って処理したくなることがある。
Tooltip Callbacks が使えるかと思ったが、ツールチップに表示する文字列をカスタマイズするためだけっぽい。
https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
Chart 全体のオプションの方に onHover イベントがあった。
options: ChartOptions = {
scales: {
x: {
// 省略
}
},
onHover: (e, elements) => {
// ポイントをクリックした時は elements[0] に PointElement が入っている。
}
};https://www.chartjs.org/docs/latest/configuration/interactions.html#events
ただこのままだと mousemove イベントが大量に発生してしまう。なので events オプションも指定。
options: ChartOptions = {
// 省略
events: ['click'],
onHover: (e, elements) => {
if (elements.length > 0) {
this.chartClick.emit(elements[0].index);
}
}
};
こうすると、マウスホバー時にツールチップが表示されなくなってしまうが、スマホからアクセスした時はどうせタップしないと表示されないので、むしろこの動作で良さそう。
上記のように elements[0].index で data 中の何番目のデータがクリックされたか参照できる。
コメントを残す