Chart.jsでonClickをチャート内部にだけ反応させる
Chart.jsを使っていてチャートをクリックしてページ遷移させたい時に、凡例をクリックしても反応してしまってました。チャートエリア内だけで反応するように修正したので方法を記載しておきます。
やりたいこと
chart.option.onClickのfunctionをcanvas全体ではなくチャート上だけで動くようにしたい。
問題事象
凡例をクリックしたときは該当項目の表示/非表示が切り替えたいのに、onClickがcanvas全体で反応してしまう。
環境
Chart.js@2.9.3
解決策
chartAreaを参照してeventのoffsetと比較することでチャート内部だけ反応するようにできました。
options:
onClick: function(event, elements) {
const {left, right, top, bottom} = this.chart.chartArea;
if (event.offsetX > left && event.offsetX < right
&& event.offsetY > top && event.offsetY < bottom
) {
document.location.href = url.replace(/123456/, hogehoge);
}
}