vue-chartjsで円グラフ。tooltipを％表示で常に表示させる。

chart.js単体の情報は見つけられたが、vue-chartjsバージョンが見つかりづらかった。
pluginをどう書くのか悩んでいたらvue-charjsのdocumentに書いてありました・・・

<pie-chart v-bind:datalist="graphUriageAmountList" v-bind:titlelist="graphTitleList"></pie-chart>

Vue.component('pie-chart', {
    extends: VueChartJs.Pie,
    props: ['datalist', 'titlelist'],  //データと見出しのリストを渡している
    mounted() {
      // ここのプラグインの書き方がなかなかわからなかったが公式に書いてあった・・・
      this.addPlugin({
        beforeRender: function (chart) {
          if (chart.config.options.showAllTooltips) {
            chart.pluginTooltips = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
              chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                  _chart: chart.chart,
                  _chartInstance: chart,
                  _data: chart.data,
                  _options: chart.options.tooltips,
                  _active: [sector]
                }, chart));
              });
            });
            chart.options.tooltips.enabled = false;
          }
        },
        afterDraw: function (chart, easing) {
          if (chart.config.options.showAllTooltips) {
            if (!chart.allTooltipsOnce) {
              if (easing !== 1)
              return;
              chart.allTooltipsOnce = true;
            }
  
            chart.options.tooltips.enabled = true;
            Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
              tooltip.initialize();
              tooltip.update();
              tooltip.transition(easing).draw();
            });
            chart.options.tooltips.enabled = false;
          }
        }
      }),
      this.renderChart(
        {
          labels: this.titlelist,
          datasets: [
            {
              label: this.titlelist,
              backgroundColor: ['#ff8c00', '#f87979', '#da70d6', '#3cb371', '#87cefa'],
              data: this.datalist
            }
          ],
        },
        {
          tooltips: {
            callbacks: {
              label: function (tooltipItem, data) {
                var label = data.datasets[tooltipItem.datasetIndex].label;
                var d = data.datasets[tooltipItem.datasetIndex].data;

                var total = Number(0);
                d.forEach(function(q){
                  total = total + q
                })

                var labelText = label[tooltipItem.index];
                labelText += Math.round(d[tooltipItem.index] / total * 100) + '%' ;
                return labelText;
              }
            },
          },
          responsive: true,
          maintainAspectRatio: false,
          showAllTooltips: true,
        })
    },
  })

tooltipを常に表示、の部分はこちらの投稿をありがたく使わせていただきました。