[Chart.js]グラフのクリックを検知したい #React

やりたいこと

下図のようなグラフでラベル部分(Januaryなど)をクリックすると詳細ページに遷移するといった動きを実現したかった

結論

きれいに実装するのは無理だった
グラフのクリックを検知してクリックしたのがどの項目か取得することはできた

やり方

Chart.jsをそのまま使うパターン

こんなグラフがあったとする

<html>
  <head>
    <meta charset="utf-8" />
    <title>chartjs sample</title>
  </head>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            data: [3, 10, 5, 2, 20, 30, 45],
          },
        ],
      },
    });
  </script>
</html>

見た目はこんな感じ
- 棒グラフの部分にホバーするとツールチップが出る

クリックイベントを検知

<html>
  <head>
    <meta charset="utf-8" />
    <title>chartjs sample</title>
  </head>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            data: [3, 10, 5, 2, 20, 30, 45],
          },
        ],
      },
    });
    // ここから追加
    document.getElementById('myChart').addEventListener('click', e => {
      const elements = chart.getElementAtEvent(e);
      if (elements.length) {
        alert(`${elements[0]._index}: ${elements[0]._model.label}`);
      }
    });
  </script>
</html>

最後の方に処理を追加しました
chart.jsのcanvas全体に対するクリックを検知してgetElementAtEventを使うことでいろいろ情報がとれます
_indexで何番目の項目_model.labelでラベルの値などとることができます
- このindexなどを使うことで冒頭に書いたやりたいことで言う遷移先などを判別することができます

これではラベルのクリックは検知できず棒グラフの部分だけ検知できます
ただ、軸の最小値を1以上にするとラベルのクリックも反応するようになりました
- この辺はたまたまこれでいける要件ならって感じですね

<html>
  <head>
    <meta charset="utf-8" />
    <title>chartjs sample</title>
  </head>
  <canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const chart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'My First dataset',
            data: [3, 10, 5, 2, 20, 30, 45],
          },
        ],
      },
      // 追加した部分
      options: {
        scales: {
          xAxes: [
            {
              ticks: {
                min: 1,
              },
            },
          ],
        },
      },
    });
    document.getElementById('myChart').addEventListener('click', e => {
      const elements = chart.getElementAtEvent(e);
      if (elements.length) {
        alert(`${elements[0]._index}: ${elements[0]._model.label}`);
      }
    });
  </script>
</html>

Reactを使ったパターン

react-chartjs-2を使った場合のやり方です
以下のコマンドでライブラリを事前に追加しておく

yarn add chart.js react-chartjs-2

まずはグラフを出すだけだとこんな感じ

App.js

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';

function App() {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        data: [3, 10, 5, 2, 20, 30, 45],
      },
    ],
  };

  const onElementsClick = elements => {
    console.log(elements);
    if (elements.length) {
        alert(`${elements[0]._index}: ${elements[0]._model.label}`);
    }
  };

  return (
    <HorizontalBar data={data} onElementsClick={onElementsClick} />
  );
}

export default App;

見た目はReactじゃない時と同じ
クリックの検知を入れるとこんな感じ

App.js

import React from 'react';
import { HorizontalBar } from 'react-chartjs-2';

function App() {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        data: [3, 10, 5, 2, 20, 30, 45],
      },
    ],
  };
  const onElementsClick = elements => {
    console.log('onElementsClick');
    console.log(elements);
    if (elements.length) {
      alert(`${elements[0]._index}: ${elements[0]._model.label}`);
    }
  };
  return <HorizontalBar data={data} onElementsClick={onElementsClick} />
}

export default App;

これでどの項目をクリックしたか検知することができる

最後に

Chart.jsがcanvasで描画されるのでこまかいことやろうとすると大変ですね
最低限やりたいことはできそう