Chart.jsを使っていて、仕様変更によって少しハマったので覚え書き。結論から言えば公式のドキュメントを読むだけで解決しましたが…
公式サイトは以下。
ドキュメントは以下から。
ダメな例
『Chart.js 凡例 非表示』とかで適当にググると、以下のような感じの例コードが出てくる。
<canvas id="myChart"></canvas>
<script>
let chart = new Chart(document.getElementById("myChart"), {
/* --- 省略 --- */
options: {
legend: {
display: false
}
}
});
</script>
あるいは『Chart.js ツールチップ 単位』とかで適当にググると、やはり以下のような感じの例が出てくる。
<canvas id="myChart"></canvas>
<script>
let chart = new Chart(document.getElementById("myChart"), {
/* --- 省略 --- */
options: {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index] + ": "
+ data.datasets[0].data[tooltipItem.index]
+ " %"; // 単位を付ける
}
}
}
}
});
</script>
しかし残念なことに、どっちも動かない。
なぜダメなのか→仕様が変わった模様
最初に凡例を消そうとして出来ず、「とりあえず置いとこう」でツールチップに単位を付ける方法をググってやはり出来なかったので、こらダメだと思い、英語がまるでダメなのでDeepL片手に公式ドキュメントを読む。
理由はすぐに分かったが、
凡例 -> Namespace: options.plugins.legend
ツールチップ -> Namespace: options.plugins.tooltip
とあり、ともにプロパティの名前空間が変わっていた訳である。
新しいやり方
ともに options.plugins に移動しているため、基本的にはそっちに移動すればよい。
凡例の非表示
<canvas id="myChart"></canvas>
<script>
let chart = new Chart(document.getElementById("myChart"), {
/* --- 省略 --- */
options: {
plugins: { // pluginsの中に
legend: {
display: false
}
}
}
});
</script>
ツールチップに単位を付ける
こちらを実装する場合はコールバック関数を利用するのだが、引数が1つになっているので、以前のままコピペでは正常に動かない。
ツールチップで他にも何かしらする場合、目的のデータやプロパティがどこにあるか先に確認してから実装しよう。
ただ、受け取るデータを見てみると以前よりもスマートになっているので分かりやすくなった印象。
<canvas id="myChart"></canvas>
<script>
let chart = new Chart(document.getElementById("myChart"), {
/* --- 省略 --- */
options: {
plugins: { // pluginsの中に
tooltip: { // プロパティ名の『s』が抜けて『tooltip』になっている点に注意
callbacks: {
label: function(context){ // 引数は1つ
let label = context.label || '';
if (label) {
label += ': ';
}
if (context.formattedValue !== null) {
label += context.formattedValue + '%'; // 単位
}
return label;
}
}
}
}
}
});
</script>
公式のドキュメントはちゃんと読もう、という話だった
ダメな例でもとくにエラー等も出ずハマりそうな内容なので、このページがググった人の助けになることを祈りつつ。
巷に出回っている情報はたいていChart.js Ver 2の時代（？）のものがほとんどな模様で、ググっても時間を浪費するだけな可能性が高いです。当たり前ですが公式読めば一発解決しました。
こういうドキュメントは丁寧な英語で書かれているので、DeepLならとてもしっかり翻訳してくれます。
筆者みたく英語が苦手な人でも何とかなりますので、公式のドキュメントはちゃんと読みましょう。