Chart.js ToolTip で%を表示する方法

Chart.js の PIE 描画でのサンプルです。
オプションで ToolTip の callback を書いて対応する。
つまり、

options: {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data){
                return %を表示する文字列を生成して返す。
            }
        }
    },
}

を書く。
全体のコード(一部割愛)
・TooTip の callback で毎回、データ合計値を求めるのは効率が悪いので初期描画と更新時に呼び出せるようにしておく。
・%表示の小数点桁数は、toFixed() で指定

var graph = {
    labels: ["Red", "Orange","Yellow", "Green", "Blue"],
    datasets: [{
        data: [],
        backgroundColor: [
            window.chartColors.red,
            window.chartColors.orange,
            window.chartColors.yellow,
            window.chartColors.green,
            window.chartColors.blue,
        ],
    }],
};

/* データ合計値を求める関数を準備 */
var calcSum = function(){
    var t = 0;
    graph.datasets[0].data.forEach(function(e){
        t += e;
    });
    return t;
};

$(function(){
    var totalValue;
    Chart.plugins.register({
        beforeDraw: function(c){
            var ctx = c.chart.ctx;
            ctx.fillStyle = "rgba(255, 255, 230, 1)";
            ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        }
    });
    var ctx = $("#myChart")[0].getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: graph,
        options: {
            responsive: true,
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data){
                        return data.labels[tooltipItem.index]
                        + ": "
                        + (data.datasets[0].data[tooltipItem.index] / totalValue * 100).toFixed(2)
                        + " % ("
                        + data.datasets[0].data[tooltipItem.index]
                        + ")";
                    }
                }
            },
        }
    });
    graph.datasets[0].data = [90, 30, 20, 15, 15];
    totalValue = calcSum();

    myChart.update();
}

サンプル
f:id:posturan:20180131213843j:plain