Chart.jsで棒グラフの目盛りを変更して上下を逆にする方法

以前紹介した、グラフの描画が簡単にできるチャートライブラリ「Chart.js」で、今回は少し変わった使い方をご紹介します。
最終的に何がしたいかというと、棒グラフを表示する際に縦軸の目盛りをカスタマイズして、上下を逆さまにしたいと思います。
つまり、棒グラフが下から上に伸びるのではなく、上から下に伸びる。
かつ、縦軸の目盛りを例えば下から上に0～100あったとすると、逆に上から下に表示するようにします。

上から下に伸びる棒グラフを作る

少し考えれば分かることですが、上から下に伸ばしないのなら単純にデータをマイナスにするだけです。
難しいのは、縦軸の目盛りも0～-100のようにマイナス表示になってしまうことです。

縦軸の目盛りを逆にする

見ての通り、要はマイナスがプラスに変われば万事解決です。
そのためには、callback関数を使って表示を変えてあげましょう。
具体的には、中学一年の最初で習う数学と同じです。
マイナスにマイナスを掛け算するとプラスになります。
ですので、以下のようにcallback関数内で「-1」を掛け算してあげます。

userCallback

これで縦軸の表示が変わりました。
ツールチップも対応したい場合はこのようにします。

callbacks

完成サンプル

出来上がったのがこちらです。

実際にこのページで使用していますのでご覧ください。