Percentage Donut

This snippet uses SVG + JQuery to draw a donut based on input percentage.

by Saksham Malhotra

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="completeDonut" style="width:100px;height:100px">

JavaScript

$(function(){
	jQuery.fn.Donut = function(data) {
		var longArc = data.value < 50 ? 1 : 0;
		var labelOffset = data.label ? 60 : 0;
		var value = ((100-data.value)/100*360)+90;
		var values = [[130,30 + labelOffset,0,'#DDDDDD'],
					  [(100 * Math.cos((value * 22) / (180*7)) + 130), -(100 * Math.sin((value * 22) / (180*7))) + 130 + labelOffset, longArc,'#DDDDDD'], 
					  [130,30 + labelOffset,longArc ? 0 : 1,data.color]];
		var svg = '<svg viewBox="0 0 260 320">';
		for(var index = 0 ; index < values.length - 1 ; index++)
		{
			svg = svg + "<path fill='none' stroke='" + values[index+1][3] + "' d='M " + values[index][0] + "," + values[index][1] + " A100,100,0," + values[index+1][2] + ",0 " + values[index+1][0] + "," + values[index+1][1] + "' stroke-width='30'></path>";
		}
		svg = svg + '<text x="130" y="' + (130 + labelOffset) + '" fill="' + data.color + '" font-family="sans-serif" font-size="70px" text-anchor="middle" dominant-baseline="central">' + data.value + '%</text>'
				  + (data.label ? '<text x="130" y="0" fill="' + data.color + '" font-family="sans-serif" font-size="50px" text-anchor="middle" dominant-baseline="hanging">' + data.label + '</text>' : '' )
				  + '</svg>';
		$('div').append(svg);
	}
	
	//Some colors from the palette to choose
	//var colors = ['#F44336','#9C27B0','#3F51B5','#03A9F4','#00BCD4','#009688','#8BC34A','#CDDC39','#FFC107','#FF9800','#795548','#9E9E9E','#607D8B'];
		
	$('.completeDonut').Donut({
		value:30,
		label:"Complete",//optional
		color:"#64AF95"
	});
});