Chart.jsのグラフにデータの値を表示する方法

グラフを分かりやすくするために、データ系列の値(データラベル)をグラフ内に表示させたい場合があります。
Chart.jsのグラフは軸ラベルの表示はできますが、グラフ内にデータラベルを表示させることはデフォルトではできません。
そんなときに便利なプラグインがあります。
chartjs-plugin-datalabels

目次

プラグイン chartjs-plugin-datalabels を使う

プラグイン「chartjs-plugin-datalabels」を使うと、Chart.jsのグラフ内にデータラベル(数値)を表示することができます。

1.プラグインを読み込む

プラグイン「chartjs-plugin-datalabels」をインクルードします。
<head>内や</body>の前など、ご自身の環境に合わせてください。
Chart.js本体よりも下に記述してください。

2.データラベルを設定

表示させるデータラベルに共通する設定は「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に関する記事まとめ】

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次