ASP.NET MVC Pie Charts with Index / Data Labels placed Inside

Download ASP.NET Chart Samples

CanvasJS Library allows you to customize and change the look and functionality of the graph. Given example shows Pie Chart with index / data labels placed inside the slice of Pie Chart. It also includes source code that you can try running locally.

@{
	Layout = null;
}

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

var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Recomended Diet"
	},
	legend: {
		cursor: "pointer",
		itemclick: explodePie,
		verticalAlign: "center",
		horizontalAlign: "right"
	},
	data: [{
		type: "pie",
		showInLegend: true,
		toolTipContent: "{name}: <strong>{y}%</strong>",
		startAngle: -45,
		indexLabel: "{name} ({y}%)",
		indexLabelFontColor: "#12122B",
		indexLabelPlacement: "inside",
		indexLabelFontSize: 15,
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

function explodePie(e) {
	if (typeof (e.dataSeries.dataPoints[e.dataPointIndex].exploded) === "undefined" || !e.dataSeries.dataPoints[e.dataPointIndex].exploded) {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = true;
	} else {
		e.dataSeries.dataPoints[e.dataPointIndex].exploded = false;
	}
	e.chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/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("Fruit", 26));
			dataPoints.Add(new DataPoint("Protein", 20));
			dataPoints.Add(new DataPoint("Vegetables", 5));
			dataPoints.Add(new DataPoint("Dairy", 3));
			dataPoints.Add(new DataPoint("Grains", 7));
			dataPoints.Add(new DataPoint("Others", 17));

			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 name, double y)
		{
			this.Name = name;
			this.Y = y;
		}

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

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

Chart Customizations

Index / Data Labels can be positioned either inside the pie or outside the pie using indexLabelPlacement property. Other commonly used customization options are indexLabelFontColor, indexLabelFontSize, etc.

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