vue-chartjsで、ツールチップをカスタマイズ

始めに

仕事で「vue-chartjs」を使用したのですが、グラフで表示するツールチップのカスタマイズ依頼がありました。
次のやり方で対応したので、備忘かねて投稿します。

コード例（抜粋）

    this.renderChart(
      {
        // valueの部分は置き換えてください。
        labels: this.$options.aaa,
        datasets: aaa
      },
      {
        responsive: true,
        maintainAspectRatio: true,
        tooltips: {
          enabled: true,
          callbacks:{
            label: function(tooltipItems, data) {
              const label = data.datasets[0].data;
              // ツールチップとして出力されるテキスト
              // 今回は％を追加してみました。
              const labelText = `${data.labels[tooltipItems.index]}:${label[tooltipItems.index]}%`;
              return labelText;
            }
          }
        }
      }
    );

注意

• ツールチップの内容を全部書き直す事になります。（デフォルトに対して、一部追加変更できないので注意）
• callbackではなく「callbacks」（ちょっとはまりました。。）

参考にしたページ

https://qiita.com/fm0707/items/944c2f22184633859637
https://qiita.com/gorogoroyasu/items/77b03beca3a5e27716e3
https://github.com/apertureless/vue-chartjs/issues/173
https://tr.you84815.space/chartjs/configuration/tooltip.html