はじめに

凡例は文字の太さや位置はオプションで対応可能ですが、レイアウトなどになるとそのままでは対応出来ませんでした。

調べたところ、大本のchart.jsでは、凡例部分のHTMLを出力させてstyleで対応させていました。
vue-chartjsでも対応する為のコードがあった為、それで対応しました。

備忘かねて投稿します。

やった事

-生HTMLなので、v-htmlを使う。
-凡例部分のHTMLにstyleを設定する際、scopedにするとstyleが反映されないので注意。（[data-v-***]がない）


  // 凡例のHTMLを生成
  this.legend = this.generateLegend();

  // 生成したHTMLを親に送出する場合
  this.$emit('legend', this.htmlLegend);