ASP.NET MVC Funnel Charts with Custom Neck Height and Width

Download ASP.NET Chart Samples

CanvasJS allows you to customize neck width and neck height in Funnel Chart. The given example shows Funnel Chart with neck customization. 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", {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "Customer Order Analysis"
	},
	data: [{
		type: "funnel",
		neckHeight: 0,
		yValueFormatString: "#\"%\"",
		indexLabel: "{label} - {y}",
		indexLabelPlacement: "inside",
		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("Total", 100));
			dataPoints.Add(new DataPoint("Verified", 80));
			dataPoints.Add(new DataPoint("Processed", 75));
			dataPoints.Add(new DataPoint("Shipped", 70));
			dataPoints.Add(new DataPoint("Delivered", 68));

			ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

			return View();
		}
	}
}                        
ausing 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

neckHeight and neckWidth properties can be used to customize the neck of the funnel. You can also change the color of each dataPoint by using the color property. Some other commonly used customization options are indexLabel, showInLegend, exploded, etc.

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