グラフを分かりやすくするために、データ系列の値（データラベル）をグラフ内に表示させたい場合があります。
Chart.jsのグラフは軸ラベルの表示はできますが、グラフ内にデータラベルを表示させることはデフォルトではできません。
そんなときに便利なプラグインがあります。
chartjs-plugin-datalabels
目次
プラグイン chartjs-plugin-datalabels を使う
プラグイン「chartjs-plugin-datalabels」を使うと、Chart.jsのグラフ内にデータラベル（数値）を表示することができます。
１．プラグインを読み込む
プラグイン「chartjs-plugin-datalabels」をインクルードします。
<head>内や</body>の前など、ご自身の環境に合わせてください。
Chart.js本体よりも下に記述してください。
２．データラベルを設定
表示させるデータラベルに共通する設定は「options.plugins」に、データごとの設定は各データの「datasets」に記述します。
options: {
// 省略
plugins: {
datalabels: { // 共通の設定はここ
font: {
size: 14
}
}
}
}data: {
labels: ['省略'],
datasets: [
{
label: '月別気温(2019)',
data: [3.7, 5.3, 8.4, 12.0, 19.3, 22.0, 25.7, 28.2, 24.8, 18.5, 11.5, 7.5],
datalabels: { // 月別気温(2019)のデータラベル設定
color: 'rgba(200,60,60,1)',
font: {
weight: 'bold'
},
anchor: 'end', // データラベルの位置（'end' は上端）
align: 'end', // データラベルの位置（'end' は上側）
padding: {
bottom: 60
},
formatter: function (value, context) {
return value + '℃'; // データラベルに文字などを付け足す
},
}
},
{
label: '月別気温(1919)',
data: [1.4, 2.9, 7.2, 12.4, 16.9, 21.0, 24.5, 25.5, 21.4, 16.2, 10.8, 4.7],
datalabels: { // 月別気温(1919)のデータラベル設定
color: 'rgba(60,160,60,1)',
anchor: 'start', // データラベルの位置（'start' は下端）
align: 'start', // データラベルの位置（'start' は下側）
padding: {
top: 10
}
}
}
]
},フォントサイズは共通で14px、
フォントの色はグラフに合わせて2019年のデータを赤、1919年のデータを緑、
フォントの太さを2019年は太字（’bold’）にしています。
「anchor」「align」「padding」でデータラベルの位置を調整しています。
基準とする画面幅で表示・非表示を切り替えるだけでは限界があるので、もう少し柔軟にラベルの位置やサイズの調整ができるといいと思います。
ここで紹介した設定については、プラグイン「chartjs-plugin-datalabels」のサイトにたくさんあります。
デフォルト状態のままでもきれいなグラフが作成できるChart.jsですが、オプション設定やプラグインを使ってもっと表現の幅を広げましょう。
【Chart.jsに関する記事まとめ】
あわせて読みたい
Chart.jsでホームページにグラフを表示するための基本知識
Chart.js はJavaScriptを使ってシンプルでフレキシブルなチャート（グラフ）を作成することができるJavaScriptライブラリです。「棒グラフ」「折れ線グラフ」「円グラフ…
あわせて読みたい
Chart.jsで作成したグラフをレスポンシブ対応させる方法
Chart.jsで作成したグラフをスマホなど横幅の狭い画面で表示させると、縮小されてせせこましい感じになってしまいます。 Chart.jsアスペクト比イメージ この記事では、C…
あわせて読みたい
Chart.jsで作成したグラフにデータを読み込ませる３つの方法（直接、CSVファイル、カスタムフィールド）
簡単お手軽にグラフを作成し、ホームページなどに表示させることができる Chart.js 。グラフ化したいデータを読み込ませる方法を３つご紹介します。 ＜script＞ に直接…
あわせて読みたい
Chart.jsのグラフに横線を入れる方法
横線正式にはなんと言うのか分かりません。例えば気温を示す折れ線グラフに、横線で平均気温を表示するようなイメージです。 ここにチャート表示 プラグイン chartjs-pl…
あわせて読みたい
Chart.jsのグラフにデータの値を表示する方法
グラフを分かりやすくするために、データ系列の値（データラベル）をグラフ内に表示させたい場合があります。Chart.jsのグラフは軸ラベルの表示はできますが、グラフ内…
コメント