ASP.NET MVC Doughnut / Donut Charts & Graphs

Download ASP.NET Chart Samples

Doughnut Charts, also referred as Donut Charts, are similar to pie charts except for a blank center. Given example shows animated ASP.NET MVC Doughnut Chart along with source code that you can try running locally.

@{
	Layout = null;
}

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	title: {
		text: "Percentage Market Share of Treatments in Alternative Medicine"
	},
	data: [{
		type: "doughnut",
		startAngle: 60,
		indexLabelFontSize: 16,
		indexLabel: "{label} - {y}%",
		toolTipContent: "<b>{label}:</b> {y}%",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>	
</body>
</html>                              
using ASPNET_MVC_ChartsDemo.Models;
using Newtonsoft.Json;
using System.Collections.Generic;
using System.Web.Mvc;

namespace ASPNET_MVC_ChartsDemo.Controllers
{
	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			List<DataPoint> dataPoints = new List<DataPoint>();

			dataPoints.Add(new DataPoint("Herbal Medicines", 41));
			dataPoints.Add(new DataPoint("Aroma Therapy", 22));
			dataPoints.Add(new DataPoint("Homeopathy", 9));
			dataPoints.Add(new DataPoint("Acupuncture", 7));
			dataPoints.Add(new DataPoint("Massage Therapy", 5));
			dataPoints.Add(new DataPoint("Reflexology", 6));
			dataPoints.Add(new DataPoint("Osteopathy", 5));
			dataPoints.Add(new DataPoint("Chiropractic", 5));
			

			ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

			return View();
		}
	}
}                        
using System;
using System.Runtime.Serialization;

namespace ASPNET_MVC_ChartsDemo.Models
{
	//DataContract for Serializing Data - required to serve in JSON format
	[DataContract]
	public class DataPoint
	{
		public DataPoint(string label, double y)
		{
			this.Label = label;
			this.Y = y;
		}

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "label")]
		public string Label = "";

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "y")]
		public Nullable<double> Y = null;
	}
}

Chart Customizations

Inner and outer radius of the Doughnut Chart can be customized using innerRadius and radius properties. Some other commonly used customization options are color, indexLabelPlacement, etc.

Note   For step by step instructions, follow our ASP.NET MVC Integration Tutorial