Chart.jsの凡例の動きのままクリック時の処理を追加したい

はじめに

こんばんは。

最近 Chart.jsを触ってるのですが、少しだけ迷って調べた部分があったので、備忘録しておきます。

本題

サンプルのコード

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script>  
    </head>
    <body>
        <div>
            <canvas id="chart"></canvas>
        </div>
        <script>
            var ctx = document.getElementById('chart');
            var option = {
                type: 'line',
                data: {
                    labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datasets: [
                        {
                            label: '友達 A', 
                            data: [10, 20, 30, 40, 50, 70, 90],
                        }, 
                        {
                            label: '友達 B',
                            data: [30, 10, 40, 50, 100, 20, 60],
                        }, 
                        {
                            label: '友達 C',
                            data: [100, 80, 0, 20, 50, 40, 70],
                        }
                    ],
                },
                options: {
                    y: {
                        min: 0,
                        max: 100,
                    },
                    plugins: {
                        legend: {
                            position: 'bottom',
                        },
                    }
                },
            };

            var myChart = new Chart(ctx, option);
        </script>
    </body>
</html>

Chart.jsの凡例はクリックすると対応しているチャートの表示・非表示を行えます。

gyazo.com

この凡例をクリックした際に処理を追加したい場合、 onClick オプションを追加することで実現できます。

options: {
    y: {
        min: 0,
        max: 100,
    }
    plugins: {
        legend: {
            position: 'bottom',
            onClick: () => {
                console.log('click!!')
            }
        },
    }
},

ただ上記のコードのように追加しちゃうと、通常の凡例の動きができなくなり、追加というより処理の上書きになってしまいます。

gyazo.com

上書きではなく追加にする場合は以下のように対応する必要があります。

ついでにどの凡例をクリックしたかを取ってみます。

plugins: {
    legend: {
        position: 'bottom',
        onClick: (e, legendItem, legend) => {
            console.log(`${legendItem.text} Click!!`)
            const index = legendItem.datasetIndex;
            const ci = legend.chart;
            if (ci.isDatasetVisible(index)) {
                ci.hide(index);
                legendItem.hidden = true;
            } else {
                ci.show(index);
                legendItem.hidden = false;
            }
        }
    },
}

gyazo.com