Vuejs - Chartjs - turning a doughnut chart to a gauge - rotation - vue.js

Question

I am new to vue.js and your help and advise would be much appreciated.
I am using Chartjs and i would like to rotate my pie chart so it looks like a gauge. I am unsure where i am going wrong with my javascript and i am getting no errors in the console - could one kindly advise me
i am unsure if i have not placed "options" in the right place
chartjs.html
<div class="wrapper">
<div class="chart_header">chartjs guage</div>
<vue-chartsguagejs></vue-chartsguagejs>
</div>
chartsjsgauge.js
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
mounted () {
this.renderChart({
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [{
label: 'GitHub Commits',
backgroundColor: ['rgb(255, 255, 255)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [50, 10, 10, 10, 10, 10],
}],
options: {
cutoutPercentage: 0,
rotation: -3.1415926535898,
circumference: 3.1415926535898,
}
}, {responsive: true, maintainAspectRatio: false})
}
}
this is currently my dougnut chart which i am trying to rotate as a gauage

Answer 1

i found that restructuring my code in this format made a huge difference:
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
data () {
return {
datacollection: {
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [10, 10, 10, 10, 10],
}
]
},
options: {
rotation: -1.0 * Math.PI,
circumference: Math.PI,
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
}
}