Chart.js の凡例をカスタマイズする #JavaScript

Chart.js の凡例をカスタマイズする際には、options.legend の各プロパティを編集する。

まず表示・非表示の切り替えは display　プロパティを true/false に切り替えることで実装できる。
また凡例の表示位置は position プロパティに 'top', 'right', 'bottom', 'left' のいずれかの値をセットする。

もっと突っ込んだカスタマイズをする必要がある場合は labels.generatelabels にセットされる関数で処理を記述すればよい。この関数の引数に必要なデータが入っているので、これを利用するが、戻り値は指定された形式のオブジェクトの配列である必要がある。

通常凡例は指定した　label の文字列が順番に表示されるが、以下のコードは label とそれぞれ項目にセットしたデータを

項目 (データ)

の形で表示するためのものである。

必要なデータにアクセスするために labels.generatelabels() の引数に渡されてくるオブジェクトの　tooltip　プロパティを利用している。そもそもツールチップ表示に必要なデータが入っているが、この中にチャートで表示されているデータについてのかなりの情報が入っている。

公式ドキュメントの凡例のページ


options: {
    legend: {
        display: true,
        position: 'right',
        labels: {
            generateLabels: function(data) {

                // 凡例の表示
                const chartData = data.tooltip._data;
                const chartDataset = chartData.datasets[0];
                const chartLabels = chartData.labels;

                const legendArray = [];

                for (let i = 0; i < chartLabels.length; i++) {
                    const eachLabel = chartLabels[i];
                    const eachData = chartDataset.data[i];
                    const backgroundColor = chartDataset.backgroundColor[i];

                    const eachLengend = {                                                                                                                                                                                                           
                        // 表示されるラベル
                        text: `${eachLabel} ( ${eachData} )`,
                        // 凡例ボックスの塗りつぶしスタイル
                        fillStyle: backgroundColor,
                        //  trueの場合、この項目は非表示のデータセットを表します。ラベルは取り消し線を伴ってレンダリングされます
                        hidden: false,
                        // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
                        lineCap: "square",
                        // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
                        lineDash: [0],
                        // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
                        lineDashOffset: 0,
                        // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
                        lineJoin: "bevel",
                        // 枠線の幅
                        lineWidth: 1,
                        // 凡例ボックスのストロークスタイル
                        strokeStyle: "",
                        // 凡例ボックスのポイントスタイル（usePointStyleがtrueの場合にのみ使用されます）
                        pointStyle: ""
                    };

                    legendArray.push(eachLengend);

                } // end for

            return legendArray;
        }
    }
}

引数で渡されてくるデータの詳細なデータ構造について知りたければ上記コードでいうと

data.tooltip._data;

の中身を詳しく調べてみればよい。

凡例オブジェクトのそれぞれのプロパティの詳細に関する説明はまた後ほど時間があるときに記述するつもり。（とりあえず公式ページのサンプルコードにあったコメントをそのまま貼り付けるにとどめておいた）。