SVG Pie Chart Component for Vue.js

PieChartSvg.vue

/*
Initial concept from: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart
Vue.js component by Darius Babcock
*/
<template>
	<div class="pie_chart_svg_container">
		
		<svg
		:height="diameter"
		:width="diameter"
		:viewBox="'0 0 '+diameter+' '+diameter"
		:stroke-dasharray="strokeDash+' '+circumference"
		>

			<!-- CONTAINER CIRCLE -->
			<circle
			:r="radius"
			:cx="radius"
			:cy="radius"
			:fill="bgColor" />

			<!-- "FILL" CIRCLE -->
			<circle
			:r="radius/2"
			:cx="radius"
			:cy="radius"
			fill="transparent" 
			:stroke="fillColor"
			:stroke-width="radius"
			
			:transform="'rotate(-90) translate(-'+diameter+')'"
			/>

		</svg>

	</div>
</template>

<script>
export default {
	name: 'PieChartSvg',
	props: {
		diameter: {
			type: [String, Number],
			required: true
		},
		bgColor: {
			type: String,
			required: false,
			default: '#bbb'
		},
		fillColor: {
			type: String,
			required: false,
			default: 'tomato'
		},
		fillPercent: {
			type: [String, Number],
			required: true
		}
	},
	data () {
		return {
			
		}
	},
	computed: {
		radius: function() {
			return (this.diameter/2);
		},

		circumference: function() {
			return Math.round((2 * Math.PI * (this.radius/2))*10)/10;
		},

		strokeDash: function() {
			return Math.round((this.fillPercent * this.circumference) / 100);
		}
	},
	methods: {
		
	},
	components: {
		
	}
}
</script>

<style lang="scss" scoped>

.pie_chart_svg_container {
	text-align: center;

	.percent_filled {
		text-align: center;
		padding: 5px 0;
		font-size: 18px;
	}

}

</style>