chart.js で各値を常に表示する方法

chart.jsはオープンソースのグラフ描画ライブラリで使いやすくとても使いやすいプラグインです。ただ、ところどころに変更したいような部分があるのも事実です。

本記事ではその中でも「グラフの値を常に表示する」という所にアプローチしていきたいと思います。使用するChart.jsのバージョンは3.7.0です。

chart.jsでは各値は表示されるはされるものの、ホバー時のみです。きれいではあるのですが、冗長という感じがします。

これはchart.jsのtooltipというものです。

今回はこのtooltipをオフにして、ホバー時ではなく、常に値を表示するように変更します。(以下グラフでホバーして表示されるのがtooltipです。)

各値を常に表示させる方法

上のグラフは１月～６月の売上です。それぞれ、120, 80, 97, 105, 94, 110とtootlipで表示されると思います。

これらの値をグラフ上に表示し、さらに単位を「万円」と付けて表示させたいと思います。

そのために使用するのが、chart.jsのプラグインとして公開されている「chartjs-plugin-datalabels」というものです。cdnで取得できるのでscriptタグ等で読み込みます。

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

先程のグラフのjavascriptに以下を追記します。

options: {
    plugins: {
      tooltip: {
           enabled: false
     },
      datalabels: {
         font: {
             size: 13
         },
         formatter: function( value, context ) {
             return value.toString() + '万円';
         }
      }
    }
},
plugins: [
    ChartDataLabels,
],

まず、tooltipを無効化する記述です。

tooltip: {
    enabled: false
},

続いて表示するテキストの設定です。

フォントサイズと数値の後に「万円」と付くようにフォーマットを変更しています。

datalabels: {
    font: {
        size: 13
    },
    formatter: function( value, context ) {
        return value.toString() + '万円';
    }
}

CDNでjavascriptを読み込んではいるが、chart.jsで使用できるようにpluginに「ChartDataLabels」を指定します。

plugins: [
    ChartDataLabels,
]

これで完成形です。

無事tooltipは消えて、売り上げが単位付で表示されるようになりました。

まとめ

chart.jsで調べていると結構バージョン2系の記事が多く、参考にならないことが多々ありました。そんな方の参考になればと思います。

pluginのgithubを見るとchart.jsの作成元と同じchatjsなので、動作の安定性は申し分なしです。