Chart.jsで、ラベルやデータ値を常に表示する方法。パイチャートで便利！

Chart.jsはレスポンシブ対応のJavascriptチャートライブラリです。

Chart.jsにおいては、グラフのデータ値はデフォルト設定では常に表示されず、マウスポインタをグラフ点に近づけたときにツールチップ表示されるようになっています。

そこで、データ値を常に表示するデータラベルを付ける方法を紹介します。

また、パイチャート等では、パイ中にラベルを表示した方がグラフが見やすくなります。応用例として、データ点付近にラベルを表示する方法も紹介します。

データラベルを追加する方法

Chart.jsのプラグイン機能を使用します。

Chart.jsのグラフを書いている<script>タグ中に次のコードを貼り付けると、すべてのグラフでデータラベルが追加されます。

// Define a plugin to provide data labels
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = 'rgb(0, 0, 0)';

                    var fontSize = 16;
                    var fontStyle = 'normal';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});

これは、Chart.pluginsに対してプラグイン登録しているため、全てのグラフでデータラベルが表示されます。

一部のグラフでのみ、データラベルを追加したい場合には、次のようにプラグインを予め定義しておいてから、グラフから読み込むようにします。

// Define a plugin to provide data labels
var dataLabelPlugin = {
    afterDatasetsDraw: function (chart, easing) {
    ...中略...
    }
};
var chart = new Chart(myChart, {
                        type: 'pie',
                        data: {
                           ...略...
                        },
                        plugins: [dataLabelPlugin],
                    });

 

例

デフォルトのパイチャートは、次のようにデータラベル表示がされません。

上記のコードを追加してみます。次のようにパイ中にデータ値が表示されます。

文字サイズは コード中のfontSizeで、文字色は ctx.fillStyleで変更できます。

ラベルを追加する方法

先程のデータ値を代入しているコードの部分で、ラベルを代入するだけです。

次のように、2行目を3行目のように書き換えます。

// Just naively convert to string for now
//var dataString = dataset.data[index].toString();
var dataString = chart.data.labels[index];

例

ドーナッツチャートで、ラベルを表示してみると次のようになります。

パーセント表示をする方法

パイチャート中に、データ割合をパーセント表示する方法は次の記事にまとめていますので、併せてご覧ください。

Chart.jsのパイチャートで、データ割合をパーセント表示する方法！

スマホでパイチャートが潰れないようにする方法

Chart.jsのパイチャート/ドーナッツチャートを、スマホなどの幅の狭い画面で表示させると、パイが縮小されすぎて見づらくなることがあります。

それを防ぐ方法は次の記事で紹介しています。

Chart.jsのパイチャートがスマホ画面で潰れてしまうのを防ぐ方法！

まとめ

Chart.jsは簡単にレスポンシブ対応のグラフを作成できることが出来ますが、今回行ったような細かなカスタマイズをしたい場合には、プラグインを使用する必要があります。

しかし、今回使用したプラグインの場合はコードをコピペするだけで機能を追加出来ます。

すぐにできますので、是非活用してみてください。

なお、ここでは紹介しませんでしたが、既成のdatalabelsプラグインを使用する方法もあります。参考にしてみてください。

以上、Chart.jsで、Chart.jsで、ラベルやデータ値を常に表示する方法。パイチャートで便利！でした。

参考文献

• Chart.js plugins
• Chart.js samples data-labeling