LoginSignup
4
0

More than 1 year has passed since last update.

Chart.jsで凡例を消したりとかツールチップに単位を表記したりとか

Posted at

Chart.jsを使っていて、仕様変更によって少しハマったので覚え書き。結論から言えば公式のドキュメントを読むだけで解決しましたが…

公式サイトは以下。

ドキュメントは以下から。

ダメな例

『Chart.js 凡例 非表示』とかで適当にググると、以下のような感じの例コードが出てくる。

exsample.html
<canvas id="myChart"></canvas>
<script>
	let chart = new Chart(document.getElementById("myChart"), {
		/* --- 省略 --- */
		options: {
			legend: {
				display: false
			}
		}
	});
</script>

あるいは『Chart.js ツールチップ 単位』とかで適当にググると、やはり以下のような感じの例が出てくる。

exsample.html
<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 に移動しているため、基本的にはそっちに移動すればよい。

凡例の非表示

exsample.html
<canvas id="myChart"></canvas>
<script>
	let chart = new Chart(document.getElementById("myChart"), {
		/* --- 省略 --- */
		options: {
			plugins: {			// pluginsの中に
				legend: {
					display: false
				}
			}
		}
	});
</script>

ツールチップに単位を付ける

こちらを実装する場合はコールバック関数を利用するのだが、引数が1つになっているので、以前のままコピペでは正常に動かない。
ツールチップで他にも何かしらする場合、目的のデータやプロパティがどこにあるか先に確認してから実装しよう。
ただ、受け取るデータを見てみると以前よりもスマートになっているので分かりやすくなった印象。

exsample.html
<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ならとてもしっかり翻訳してくれます。
筆者みたく英語が苦手な人でも何とかなりますので、公式のドキュメントはちゃんと読みましょう。

4
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0