結論：plugins.legendで制御する
Chart.js v4で凡例（グラフ上部などに出るラベル一覧）を操作するには、options.plugins.legendにオプションを指定します。非表示にしたいだけならdisplay: false、位置を変えたいならposition、ラベルの見た目を変えたいならlabelsを使います。
new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
legend: {
display: true, // 凡例の表示・非表示
position: 'bottom', // 'top' | 'bottom' | 'left' | 'right'
labels: {
usePointStyle: true, // 四角ではなく丸のアイコンにする
padding: 16,
font: { size: 12 }
}
}
}
}
});
実際に動くデモです。ボタンで表示・非表示と位置を切り替えられます。
実装解説：各オプションの意味
display（表示・非表示）
plugins.legend.displayをfalseにすると凡例そのものが描画されなくなります。データ系列が1つしかなくグラフタイトルで内容が分かる場合や、ダッシュボードでスペースを節約したい場合に使います。
options: {
plugins: {
legend: { display: false }
}
}
position（表示位置）
positionには'top'・'bottom'・'left'・'right'を指定できます。デフォルトは'top'です。系列名が長い場合や系列数が多い場合は、横幅を圧迫しない'bottom'のほうが収まりがよくなります。
options: {
plugins: {
legend: { position: 'bottom' }
}
}
labels（ラベルの書式）
labels.usePointStyle: trueにすると、デフォルトの四角いカラーボックスの代わりに、線グラフのポイントと同じ丸いアイコンが表示されます。labels.paddingで凡例項目同士の間隔、labels.fontでフォントサイズや太さを調整できます。
options: {
plugins: {
legend: {
labels: {
usePointStyle: true,
padding: 16,
font: { size: 12, weight: 'bold' },
color: '#374151'
}
}
}
}
onClick（クリック挙動の変更）
凡例のラベルをクリックすると、該当する系列の表示・非表示が切り替わるのがデフォルトの挙動です。この挙動自体を変えたい場合はonClickにコールバック関数を渡します。以下は、クリックしても系列を消さずにコンソールへログだけ出す例です。
options: {
plugins: {
legend: {
onClick: function(e, legendItem, legend) {
console.log('クリックされた系列:', legendItem.text);
// デフォルトの表示・非表示トグルを止めたい場合は
// ここで chart.setDatasetVisibility() 等を呼ばずに return するだけでよい
}
}
}
}
v2 / v3との違い（重要）
Chart.js v2やv3の古いサンプルコードでは、凡例のオプションはoptions.legend直下に書かれていました。v4ではこの構造がプラグインAPIに統合され、必ずoptions.plugins.legendの中に書く必要があります。
// v2/v3の書き方（v4では効かない）
options: {
legend: {
display: false,
position: 'bottom'
}
}
// v4の正しい書き方
options: {
plugins: {
legend: {
display: false,
position: 'bottom'
}
}
}
ネット上のChart.js記事やAIが生成したサンプルには、まだv2/v3時代のoptions.legend直下の書き方が数多く残っています。これをそのままコピペすると、エラーは出ないのに凡例の設定だけが無視されるという分かりにくい状態になります。
よくあるバリエーション・ハマりどころ
options.legendに書いてしまい設定が効かない
先述の通り、v4で最も多いつまずきはoptions.legend直下に書いてしまうパターンです。Chart.js v4はこの位置の値を単純に無視するため、コンソールにエラーが出ず、原因に気づきにくいのが厄介なところです。凡例の設定が反映されないときは、まずplugins.legendの中に書けているか確認してください。
凡例を非表示にしたら系列の見分けがつかなくなった
display: falseで凡例を消すと、グラフ内の色だけでは系列名が分からなくなります。系列が1つだけの場合はplugins.titleでグラフタイトルを表示して補うか、系列が複数ある場合はツールチップ（plugins.tooltip）で系列名を確認できるようにしておくと、凡例なしでも情報が欠けません。
options: {
plugins: {
legend: { display: false },
title: {
display: true,
text: '月別サイト訪問者数'
}
}
}
凡例クリックで系列を非表示にしたくない
ダッシュボードなどで「凡例はクリックできない一覧表示にしたい」場合は、onClickに空の関数を渡すだけで、デフォルトの表示・非表示トグルを止められます。
options: {
plugins: {
legend: {
onClick: function() {} // クリックしても何もしない
}
}
}
まとめ
Chart.js v4の凡例カスタマイズは、すべてoptions.plugins.legendの中で完結します。非表示にするならdisplay: false、位置を変えるならposition、見た目を整えるならlabels、クリック挙動を変えるならonClickです。v2/v3のサンプルをそのまま流用するとoptions.legend直下に書いてしまいがちなので、動かないときはまずこの位置を疑ってください。
関連するUI事例
Chart.js v4を使ったグラフの実装例です。凡例の挙動を実際のグラフで確認できます。
あわせて読みたい
Chart.js v4の実装Tipsをまとめています。