ひとつのページに複数のグラフを表示（Chart.js）

当社の簡易IoTシステムでは、Webブラウザでグラフを表示する際に「Chart.js」を使っています。

ひとつのWebページに、小さい棒グラフをたくさん表示したいケースがあったのですが、その際に工夫した点を、備忘録として書いておきます。

棒グラフの軸にマウスを近づけると、吹き出し（tooltips）で、項目名と数値が表示されます。
この際、canvasが小さいため、吹き出しがcanvasの枠からはみ出てしまい、数値が読めないケースがありました。

項目名（X軸の値）はグラフから容易に読み取れるので、吹き出しには項目名を表示せず、数値のみを表示させようと思ったのですが、項目名を非表示にする方法が分かりませんでした。
そのため、項目名の「フォントサイズ」と「スペーシング」をゼロに設定したところ、所望の効果が得られました。

options: {
  tooltips: { titleFontSize : 0, titleMarginBottom : 0 }
}

「Chart.js」では、表示するデータに基づいて、適切なY軸のスケールを設定してくれますが、この仕組みを使うと、複数の棒グラフを並べて表示する場合、グラフ毎のY軸のスケールがバラバラになってしまいます。

この対策として、全グラフのデータの最大値を求めて、それを全グラフのY軸の最大値として設定しようと思いましたが、そうするとY軸の最大値が中途半端な値になってしまいます。
このため、以下のような処理で、最大値をキリの良い値に切り上げました。

for( $digits=0 ; $max>=10 ; $digits++ ){ $max = $max/10; }
$max = ceil($max);
for( $i=0 ; $i<$digits ; $i++ ){ $max = $max*10; }

このようにして求めた最大値を「Chart.js」に設定することにより、所望の通り表示されました。

options: {
  scales: { yAxes: [{ ticks: { min: 0, max: 30 } }] }
}

MSR合同会社