JavaScript Pie Charts with Custom Radius

Download JavaScript Chart Samples

You can customize radius/size of JavaScript Pie Charts as per your requirement. Library provides several customization options to change the look and functionality of the graph. You can also change starting angle of Pie Chart or change individual color of each data point. Given example shows a JavaScript Pie Chart with Custom Radius. It also contains source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	theme: "light2",
	animationEnabled: true,
	title: {
		text: "Shares of Electricity Generation by Fuel"
	},
	subtitles: [{
		text: "United Kingdom, 2016",
		fontSize: 16
	}],
	data: [{
		type: "pie",
		indexLabelFontSize: 18,
		radius: 80,
		indexLabel: "{label} - {y}",
		yValueFormatString: "###0.0\"%\"",
		click: explodePie,
		dataPoints: [
			{ y: 42, label: "Gas" },
			{ y: 21, label: "Nuclear"},
			{ y: 24.5, label: "Renewable" },
			{ y: 9, label: "Coal" },
			{ y: 3.1, label: "Other Fuels" }
		]
	}]
});
chart.render();

function explodePie(e) {
	for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
		if(i !== e.dataPointIndex)
			e.dataSeries.dataPoints[i].exploded = false;
	}
}
 
}

Chart Customizations

The color and the opacity of the data points can be changed by using the color and fillOpacity properties available at data series level. Other commonly used customization options are exploded, startAngle, etc.