vue-chartjsでチャート(グラフ）を中央配置（中央寄せ）するのに苦戦したので、備忘として残しておきます。

デフォルトでは左寄せされます。
responsiveをtrue（デフォルトではtrue)にしている場合は気にならないですが、falseにした場合にはこれを中央寄せしたいです。

やりたかったけどできなかった方法

<canvas>に直接margin:autoを指定する。
これを指定してあげれば中央寄せができるのですが、vue-chartjsからはのstyleを直接指定できなさそうなので断念しました。

実現できた方法

html側でcomponentを記述する際にstyle属性にdisplay:flexとjustify-content:centerを指定することで中央寄せができました。

例)

<radar-chart :chartData="chartData" :options="chartOption" :styles="{'display':'flex', 'justify-content':'center'}"></radar-chart>

チャートが展開されると<canvas>が<div>に囲われます。sytle属性で指定するとこのdivにstyleが適用されます。

vueのtemplateは1つのroot要素が必要ですが、<canvas>要素はroot要素になれないため<div>で囲んでいるそうです¹。