Chart.js 3.9.1

1. 棒グラフの中にラベルを表示する

2. 棒グラフの外にラベルを表示する

ChartDataLabelsプラグインを読み込むと、自動的に棒グラフの中にデータの値が表示される。

この機能を利用するには、下記のプラグインファイルを読み込む。このファイルは Chart.jsをインストールすると同時にバンドルされている。

pluginsプロパティを追加し、プラグイン名「ChartDataLabels」を指定する。 optionsプロパティにも pluginsプロパティがあるが別ものである（紛らわしい）。

また options.pluginsプロパティに dataLabelsプロパティを追加し、formatterにコールバック関数を記述すれば、表示する文字列を編集することができる。値を編集したグラフ

積み上げ棒グラフの各要素の値を合計し、グラフの枠外（上部）に表示する。

この積み上げ棒グラフは、3個の要素から成り立っている。3個目の要素は空の要素で、ラベル（datalabelsプロパティ）に合計金額を表示させるためだけに使う。

datasetsプロパティに3個目のオブジェクトを追加し dataの値は全てゼロにする。sumプロパティはアプリケーションで独自に追加したもので、月毎の合計金額を格納する。

datalabelsの alignプロパティはラベルを表示する位置を指定する。'end' はラベルの表示位置を棒の底側とする。視覚的には、合計値が積み上げ棒グラフのすぐ真上に表示されるようになる。

月毎の金額の合算はカスタムプラグインを作成して行っている。この処理はグラフのデータの更新前（beforeUpdate）に起動する。各月毎に「売り上げA」と「売り上げB」を合計し、sumプロパティの配列に追加する。

プラグインは静的に定義したグラフのデータや属性を実行時に動的に変更することができる強力なツールである。第１引数の chartが重要で、Chartオブジェクトが保持する全てのプロパティを参照/更新することができる。

プラグインは Chartオブジェクトを作成している途中のどこかで処理を行う。起動するタイミングは色々選択できる。本例では、グラフのデータセットを作成する直前（beforeUpdate）に起動している。プラグインの詳細はマニュアルを参照のこと

次のプラグインはグラフの表示方法を定義する optionsのプロパティを更新する例である。

pluginsプロパティにプラグインのオブジェクト名を指定するだけである。あとは所定のタイミングで自動的にプラグインが起動する。

なお、この処理はプラグインを使わなくともできる。Chartオブジェクト（chart1）を作成した後にプラグインと全く同じ処理を行えばよい。違うのは、グラフの表示処理が２回行われることだが、多分パフォーマンスには影響ないと思われる。

options.pluginsに datalabelsプロパティを追加し、formatterプロパティに戻り値がラベルの文字列になるコールバック関数を記述する。3番目の要素（合計金額）は、datasetsプロパティの sumプロパティから対応する値を求める。

関数の中で console.log(context)を実行

普通のデータラベルとして要素の値を表示するだけなら、第１引数の valueを利用すればよい。ここでは、第２引数の contextについて少し説明する。contextは各種プロパティを通して、Chartオブジェクトの多くのプロパティを参照することができる。

コールバック関数はデータラベルを表示するごとに毎回呼ばれる。本例でいえば、ひと月の棒グラフに3個のラベルがあり、それが12ヶ月分なので、合計36回呼ばれる。

dataIndexプロパティと datasetIndexプロパティから今表示中のラベルの位置が判る。dataIndexプロパティには月に当たるインデックス（0〜11）が、datasetIndexプロパティには積み上げグラフの要素の順番に当たるインデックス（0〜2）が設定される。

ログに表示したデータラベルは、5月（index 4の月）の売り上げ A（index 0の積み上げデータ）であることを意味する。

datasetプロパティには、Chartオブジェクトの data.datasetsプロパティに作成した３つのオブジェクトのうち、datasetIndex番目のオブジェクトが格納される。これらのデータを利用して色々な編集を行うことができる。

ただし注意すべきは、この関数からは自身以外の積み上げ要素オブジェクトにアクセスできないことである。つまり、３番目の積み上げ要素である合計金額を表示するデータラベルからは、１,２番目の要素である売り上げ金額を取得することができない。これはかなり困る。そのためわざわざプラグインを作成して、合計金額を計算し、3番目の積み上げ要素に追加するというやや技巧的ことを行っている。

もっと単純な方法としては、金額のデータセットを Chartオブジェクトの外で、例えば 2次元の配列として定義するという手もある。そうすれば、取得したインデックスを利用してその配列から必要な金額を取得し計算するということができる。

ただ、スコープがあるからできるのだが、コールバック関数の中から Chartオブジェクトを飛び越えて、そこに直接アクセスするのは気がひけるところはある。どのような方法を取るかは結局条件次第ではあるが。