Legend Configuration

チャートの凡例は、チャートに表示されるデータのデータセットの情報を表示します。

設定

凡例設定は名前空間options.legendに渡されます。 グローバルオプションはChart.defaults.global.legendで定義されています。

position

凡例の表示位置を指定します。以下を指定することができます。

• top
• left
• bottom
• right

align

凡例の配置を指定します。以下を指定することができます。

• start
• center
• end

デフォルト値はcenterです。

凡例ラベル設定

凡例ラベル設定はlabelオプションのサブオプションです。

凡例項目

凡例のonClickに渡される項目は、labels.generateLabelsから返される項目です。 それらの項目は以下のように設定する必要があります。

{
    // 表示するラベル
    text: string,

    // 凡例ボックスを塗りつぶす色
    fillStyle: Color,

    // trueの場合、非表示のデータセットになります。このデータのラベルには取り消し線が表示されます。
    hidden: boolean,

    // 凡例とチャートの線のための設定です。
    // 参照：https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineCap 
    lineCap: string,

    // 凡例とチャートの線のための設定です。
    // 参照：https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: number[],

    // 凡例とチャートの線のための設定です。
    // 参照：https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: number,

    // 凡例とチャートの線のための設定です。
    // 参照：https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: string,

    // ボックスの枠線の太さ。
    lineWidth: number,

    // 凡例ボックスの枠線のスタイル。
    strokeStyle: Color

    // 凡例のポイントのスタイル。(usePointStyleをtrueにした場合のみ。)
    pointStyle: string

    // ポイントの角度 (usePointStyleをtrueにした場合のみ。)
    rotation: number
}

例

以下は、凡例を有効化し、全ての文字色を赤にする例です。

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

クリックアクションをカスタマイズ

凡例の項目をクリックした時に、別の動作を指定したい場合があります。 設定オブジェクトにコールバックを設定するだけで、簡単に実現できます。

デフォルトの凡例クリック時の動作は以下のとおりです。

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // controller.isDatasetVisibleのコメントを参照して下さい。
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

    // データセットを非表示にしました。チャートを再表示してください。
    ci.update();
}

代わりに最初の2つのデータの表示状態をリンクする必要があるとします。 以下のようにクリックハンドラを変更することができます。

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // デフォルトの動作を行います。
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [
            ci.getDatasetMeta(0),
            ci.getDatasetMeta(1)
        ].forEach(function(meta) {
            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {
            onClick: newLegendClickHandler
        }
    }
});

チャートの凡例をクリックすると、最初の2つのデータの表示状態がリンクされます。

HTML凡例

時々、複雑なデザインの凡例を生成する必要があるかもしれません。 この場合、HTMLを使うのが合理的です。 Chart.jsはプロトタイプにHTMLを返すgenerateLegend()メソッドを用意しています。

凡例の生成を変更するにはlegendCallbackプロパティを使うことができます。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function(chart) {
            // ここでHTML文字列を返します。
        }
    }
});

legendCallbackは自動で呼び出されないため、 この関数を使って凡例を生成する場合は手動でgenerateLegend()を呼び出す必要があります。

デモ

チャートのラベルとラインを変更しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1,
            borderDash: [1, 3],
            strokeStyle: "rgb(54, 162, 235)",
            pointStyle: 'triangle',
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
            borderDash: [5, 10],
            strokeStyle: "rgb(255, 99, 132)",
            pointStyle: 'rect',
        },
        {
            type: 'line',
            label: "C",
            data: [70, 43, 33, 62, 53, 93, 30],
            backgroundColor: "rgba(255, 206, 86, 0.2)",
            borderColor: "rgb(255, 206, 86)",
            borderWidth: 1,
            borderDash: [3, 15],
            strokeStyle: "rgb(255, 206, 86)",
            pointStyle: 'star',
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 30,
                fontSize: 16,
                fontColor: '#333',
                padding: 20,
                filter: function(items, chartData) {
                    // データセットのインデックスが0(A)でないものを表示します。
                    return items.datasetIndex !== 0;
                },
                usePointStyle: true,
                generateLabels: function(chart){
                    return  chart.data.datasets.map(function(dataset, i) {
                        return {
                            // plugin.legend.js generateLabels.labelsを参照してください。
                            text: dataset.label,
                            fillStyle: dataset.backgroundColor,
                            hidden: dataset.hidden,
                            lineCap: dataset.borderCapStyle,
                            lineDash: dataset.borderDash,
                            lineDashOffset: dataset.borderDashOffset,
                            lineJoin: dataset.borderJoinStyle,
                            lineWidth: dataset.borderWidth,
                            strokeStyle: dataset.borderColor,
                            pointStyle: dataset.pointStyle,
                            // 以下はデータセットの表示をトグルする場合に使用します。
                            datasetIndex: i
                        };
                    });
                }
            }
        }
    }
});

HTML

<canvas id="myChart"></canvas>