Chart.jsでy軸の0表示と間隔

Chart.jsの細かい仕様を理解しないまま仕事に使って2時間くらいハマった問題とその回避方法のメモです。

いろいろ検索したけど求める解がなかったので自分の備忘録としてメモしておきます。私のようにハマらないようにお気をつけください。

前提として、

１）y軸の間隔（stepSize）は0.5にしたい

２）y軸の上限と下限は指定しないで自動的にstepSize間隔で丸めたい

３）y軸の0（つまりx軸）を常に表示したい（beginAtZeroのはずだけど…うまく行かない）

４）タップでポイントの値を表示したい

を実現させたい。公式ドキュメントを参考にしてたつもりでした。

結論を先に載せますと、これが今のところの答えです。コピペは自由ですがご自身の環境に置き換えてください。

options: {

scales: {

y: {

suggestedMin: -0.5,

suggestedMax: 0.5,

ticks: {

stepSize: 0.5,

maxTicksLimit: 20

}

plugins: {

tooltip: {

enabled: true,

intersect: false,

mode: 'nearest'

}

y軸の間隔は、stepSize: 0.5を指定しました。

これで0.5間隔になると信じてましたが甘かったです。画像のように0が表示されなかったり、間隔が1.0になってしまいました。

0表示したいって検索するとかなりの確率でbeginAtZeroを使えばできると書いてる記事が多かったです。ですが、指定してもできなません。いろいろ試してる中でふと気づいたのが軸の線の数が足りない？というところが今の答えに導いてくれました。

maxTicksLimitが軸線の数制限で、デフォルト11となっていたのでスルーしてましたがこれを明示的に指定することで解決しました。これで0表示と間隔の問題は解決しました。

まだ別の問題が…

ポイント全ての値が0付近になった場合、y軸の上限または下限は0.5（もしくは-0.5）と表示してほしいのですが、なぜか0.3になってしまう…これはsuggestedMin/suggestedMaxを明示的に指定することで解決しました。

４）のスマホ画面でピンポイントにタップできない状況でポイントデータ表示するには、tooltipsを

intersect: false　明示的にマウスポジションのインターセプトをオフにします

mode: ‘nearest’　一番近いポイントのデータを表示するモードにします

で設定してあげれば解決です。これについてはドキュメント通りだったのでハマりはしませんでした。

時間的にバグなのか仕様なのか突き詰めることはできなかったですが、勉強になりました…

Page updated

Report abuse