JavaScriptで円グラフや棒グラフなどを簡単に表示できるライブラリ「Chart.js」
お勉強がてらの記事です。
第２回で作成した積み上げ棒グラフに折れ線グラフを重ねた複合グラフですが、このままだとTooltips表示が一体化していて納得できない！！
ということで、第３回の今回はTooltipsをいいカンジに表示します。

使用するデータ

前回と同様の為、詳細は省略します。

複合グラフの通常のTooltips

「合計」表示が「個別」表示と一体化しちゃってますね・・・。

尚、使用したChart.jsのバージョンは「2.7.1」です。
※Chart.jsの詳細は公式HPをご覧ください。

ソースコード

Chart.jsでグラフ表示する為のソースコードは以下になります。
前回のソースコードからの差分のみです。
差分はTooltips部分のみです。

tooltips:{
  mode:'label'
}

前回のソースコード

tooltips:{
    callbacks: 
    {
        label: function(tooltipItems, data) {
            if(tooltipItems.yLabel == "0"){
                return "";
            }
            return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.yLabel + "個";
        }
    }
}

修正後のソースコード

任意の表示をしたい場合はcallbacksオプションを利用します。
修正ついでに値がない場合は何も表示しないようにしてみました。
また、表示内容に関しては各要素データをIndexで引っ張ってきて、“個数”として表示しています。

表示結果

修正後の表示結果
意図したとおりに合計が単体で表示されていますね！

最後にひとこと

今回はライブラリに修正を加えない範囲でTooltipsの表示をを変更してみました。
次回はさらに深くイジっていきたいと思いますので、お楽しみに！