ASP.NET MVC Box And Whisker Chart with Customization

Download ASP.NET Chart Samples

In Box And Whisker Chart, Upper & Lower boxes can be customized with varying colors. Given example shows Box And Whisker Chart with customized color for upper and lower box. It also contains 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,
	theme: "light2",
	title: {
		text: "Life Expectancy - Europe"
	},
	axisY: {
		title: "Age (in years)"
	},
	data: [{
		type: "boxAndWhisker",
		color: "black",
		upperBoxColor: "#FF7E00",
		lowerBoxColor: "#797979",
		yValueFormatString: "#,##0.## years",
		dataPoints: @Html.Raw(ViewBag.DataPoints)
	}]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" 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("Germany", new double[] { 67.5, 70.55, 76.705, 79.406, 73.15 }));
			dataPoints.Add(new DataPoint("France", new double[] { 67.41, 71.03, 78.05, 80.657, 74.36 }));
			dataPoints.Add(new DataPoint("Spain", new double[] { 64.94, 70.565, 78.17, 80.94, 75.345 }));
			dataPoints.Add(new DataPoint("UK", new double[] { 69.18, 71.06, 76.819, 79.425, 73.4 }));
			dataPoints.Add(new DataPoint("Switzerland", new double[] { 69.62, 72.045, 78.7, 81.7, 75.8 }));
			dataPoints.Add(new DataPoint("Greece", new double[] { 65.86, 70.255, 78.0625, 85, 75.24 }));
			dataPoints.Add(new DataPoint("Poland", new double[] { 61.31, 68.625, 72.035, 75.56, 70.915 }));

			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 double[] Y = null;
	}
}

Chart Customizations

The colors of the upper and lower sections of the box plot can be customized using upperBoxColor & lowerBoxColor properties. Other commonly used customization options are color, lineDashType, etc.

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