vue-chartjsで凡例をカスタマイズ

はじめに

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

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

備忘かねて投稿します。

やった事

• mount後に'generateLegend()'して、凡例のHTMLを取得。
• 取得したHTMLに対してstyleを設定

今回の案件では

• 生成したHTMLを親コンポーネントに送る
• 親コンポーネントでイベント購読し、凡例部分のHTMLを取得する。
• HTMLとして出力。style設定

今回の注意事項

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

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

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

参考

https://qiita.com/choro/items/69029ac20a539670ee68
https://vue-chartjs.org/api/#generatelegend
https://stackoverflow.com/questions/44649247/how-to-create-custom-legend-in-chartjs