Chart.js 3.9.1

ツールチップをカスタマイズしてみる。

ツールチップは、上段のタイトルと下段のラベルから構成される。デフォルトの表示では、タイトルには各グラフの X軸見出し（"1月"〜"12月"）が、ラベルにはラベル名（"売り上げ"）と月別の値（10〜120）が表示される。

フォントサイズ、文字色、背景色を変更する。

ツールチップのラベルの値に"万円"を付与する。

フォントサイズ、文字色、背景色を変更するコード。Chartオブジェクトの optionsプロパティの pluginnsプロパティの tooltipプロパティを変更する。

ツールチップの表示内容を変更するにはコールバック関数を実装する。

コールバック関数は、ツールチップを表示する場所に応じていくつか用意されている。主なものにタイトルを再編集する title関数、ラベルを再編集する label関数があり、他にタイトルやラベルの前後に任意の文字列を表示する beforeTitlle、afterTitle、beforelabel、afterLabel関数がある。詳しくは Chart.js 公式マニュアルを参照

関数の基本構造

基本的に引数の定義は全ての関数で共通である。第１引数の tooltipItemオブジェクトには、プロパティとして chart, label, parsed, raw, formattedValue, dataset, dataIndex, datasetIndex, element が格納される。 これらのプロパティの下には、グラフを構成する各種オブジェクトがそれぞれ保持される。本稿では、よく使われるものをいくつかを紹介する。

なお、関数の種類によっては、tooltipItemオブジェクトが配列として定義されるが、配列の１番目の要素に TooltipItemオブジェクトが格納され、結局配列でない場合と同じである。

label関数を実装して、ツールチップのラベルの値に"万円"を付与してみる。

tooltipItemオブジェクトでよく使われるプロパティの一つが datasetプロパティである。これは、Chartオブジェクトの dataプロパティの datasetsプロパティ（配列）の一要素に相当する。本例のような単純なグラフの場合、配列の要素が一つだが、積み上げグラフになると配列の要素が複数になる。これについては後述する。

datasetプロパティを通してグラフの値やラベルを参照することができる。dataIndexプロパティは、ツールチップを表示しているグラフの順序番号を示すもので、これを添字に datasetプロパティの data配列を参照し、当該グラフの値を取得することができる。コールバック関数の戻り値には、ツールチップのラベルに表示する文字列を指定する。ここでは、labelプロパティから取得したラベル名 "売り上げ" と、data配列から取得した値に"万円"を付与したものを文字列として返している。

なお、parsedプロパティの yプロパティからはツールチップを表示しているグラフの値が取得できるのでこちらを使っても良い。（こちらの方が簡単）

tooltipItemオブジェクト直下の labelプロパティには、ツールチップを表示しているグラフの x軸見出し（"1月"〜"12月"）が格納される。上記の datasetプロパティの labelと混同しないように。

積み上げグラフのツールチップに各要素の合計値を表示してみる。この例では、売り上げAと売り上げBの合計値を表示する。

積み上げグラフのツールチップは、ツールチップの位置にある積み上げ要素を表示する。この例では、グラフの赤いところのツールチップは売り上げBの金額を、青いところのツールチップは売り上げAの金額を表示する。

下記ソースに示すように、label関数の実装において、引数の tooltipItemオブジェクトの datasetプロパティが参照する配列の要素は、ツールチップを表示する場所によって自動的に切り替わる。本例では、"売り上げA"か"売り上げB"のいずれかになる。これはつまり、一時点でツールチップが参照できる要素は、ツールチップの位置にある積み上げ要素に対してのみであり、他所の位置の要素は参照できないということである。

下記は、この積み上げグラフの Chartオブジェクトの構造である。datasetsプロパティは、1番目の要素は"売り上げA"、2番目の要素は"売り上げB"の配列になる。

合計値を集計するためには、積み上げた各要素を串刺しに参照する必要がある。 上記の例でいえば、1月は 10 +10、2月は 20 +12 というように。

ここでは、コールバック関数の beforeBodyを実装してラベルの上部に合計金額を表示する。コールバック関数の引数である tooltipItemオブジェクトの chartプロパティは Chartオブジェクトそのものに相当するので、dataプロパティを通してdatasetsプロパティ（配列）を参照することができる。

dataIndexプロパティからツールチップを表示しているグラフの添字（何月か？）がわかるので、それを元に配列の要素を取得して合計値を求める。表示文字列を編集して関数の戻り値とする。

なお tooltipItemオブジェクトの datasetIndexプロパティには、現在ツールチップに表示中の datasets配列の要素の添字が格納される。似たような名前のプロパティが多いいが、ここは明確にしておきたいところである。

結局のところ chartプロパティはオールマイティなので、操作はこのプロパティを通じて行えば良いということになるのかもしれない。

文字列に改行コードを含めても改行しない。 文字列を配列にして返せば、配列の要素ごとに改行して表示できる。

ツールチップのタイトルに文字列を付与して表示する。