<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div id="app">
		<donut-chart :initial-values="values"></donut-chart>
	</div>
	<script type="text/x-template" id="donutTemplate">
		<svg height="160" width="160" viewBox="0 0 160 160">
			<g v-for="(value, index) in sortedValues">
				<circle :cx="cx" :cy="cy" :r="radius" :stroke="colors[index]" :stroke-width="strokeWidth" :stroke-dasharray="circumference" :stroke-dashoffset="calculateStrokeDashOffset(value, circumference)" fill="transparent" />
				<text></text>
			</g>
		</svg>
	</script>	
</body>
</html>
Vue.component('donutChart', {
	template: '#donutTemplate',
	props: ["initialValues"],
	data() {
		return {
			angleOffset: 0,
			chartData: [],
			colors: ["#6495ED", "goldenrod", "#cd5c5c", "thistle", "lightgray"],
			cx: 80,
			cy: 80,		      
			radius: 60,
			sortedValues: [],
			strokeWidth: 30,
		}
	},
	computed: {
		circumference() {
			return 2 * Math.PI * this.radius
		},
    dataTotal() {
      return this.sortedValues.reduce((acc, val) => acc + val)
    },    
		sortInitialValues() {
			return this.sortedValues = this.initialValues.sort((a,b) => b-a)
		}
	},
  methods: {
  calculateStrokeDashOffset(dataVal, circumference) {
    const strokeDiff = this.dataPercentage(dataVal) * circumference
    return circumference - strokeDiff
  },    
    dataPercentage(dataVal) {
      return dataVal / this.dataTotal
    }
  },  
	mounted() {
		this.sortInitialValues
	}
})
new Vue({
	el: "#app",
	data() {
		return {
			values: [230, 308, 520, 130, 200]
		}
	},
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js