ASP.NET MVC Stacked Area Charts & Graphs

Download ASP.NET Chart Samples

Stacked Area Chart is formed by stacking one series on top of the another and is useful to compare contribution of two or more series with the total. Given example shows simple ASP.NET MVC Stacked Area 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: "Sales by Region"
	},
	axisY: {
		title: "Amount (in USD)",
		prefix: "$",
		suffix: "K"
	},
	legend: {
		horizontalAlign: "right",
		verticalAlign: "center",
		reversed: true
	},
	toolTip: {
		shared: true,
		reversed: true
	},
	data: [{
		type: "stackedArea",
		name: "East",
		showInLegend: true,
		yValueFormatString: "$#,##0K",
		dataPoints: @Html.Raw(ViewBag.DataPoints1)
	},
	{
		type: "stackedArea",
		name: "West",
		showInLegend: true,
		yValueFormatString: "$#,##0K",
		dataPoints: @Html.Raw(ViewBag.DataPoints2)
	},
	{
		type: "stackedArea",
		name: "North",
		showInLegend: true,
		yValueFormatString: "$#,##0K",
		dataPoints: @Html.Raw(ViewBag.DataPoints3)
	},
	{
		type: "stackedArea",
		name: "South",
		showInLegend: true,
		yValueFormatString: "$#,##0K",
		dataPoints: @Html.Raw(ViewBag.DataPoints4)
	}]
});
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> dataPoints1 = new List<DataPoint>();
			List<DataPoint> dataPoints2 = new List<DataPoint>();
			List<DataPoint> dataPoints3 = new List<DataPoint>();
			List<DataPoint> dataPoints4 = new List<DataPoint>();

			dataPoints1.Add(new DataPoint("2012", 60));
			dataPoints1.Add(new DataPoint("2013", 62));
			dataPoints1.Add(new DataPoint("2014", 63));
			dataPoints1.Add(new DataPoint("2015", 50));
			dataPoints1.Add(new DataPoint("2016", 36));
			dataPoints1.Add(new DataPoint("2017", 50));

			dataPoints2.Add(new DataPoint("2012", 25));
			dataPoints2.Add(new DataPoint("2013", 65));
			dataPoints2.Add(new DataPoint("2014", 33));
			dataPoints2.Add(new DataPoint("2015", 25));
			dataPoints2.Add(new DataPoint("2016", 65));
			dataPoints2.Add(new DataPoint("2017", 56));

			dataPoints3.Add(new DataPoint("2012", 50));
			dataPoints3.Add(new DataPoint("2013", 55));
			dataPoints3.Add(new DataPoint("2014", 21));
			dataPoints3.Add(new DataPoint("2015", 55));
			dataPoints3.Add(new DataPoint("2016", 46));
			dataPoints3.Add(new DataPoint("2017", 70));

			dataPoints4.Add(new DataPoint("2012", 80));
			dataPoints4.Add(new DataPoint("2013", 42));
			dataPoints4.Add(new DataPoint("2014", 33));
			dataPoints4.Add(new DataPoint("2015", 60));
			dataPoints4.Add(new DataPoint("2016", 39));
			dataPoints4.Add(new DataPoint("2017", 88));

			ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);
			ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);
			ViewBag.DataPoints3 = JsonConvert.SerializeObject(dataPoints3);
			ViewBag.DataPoints4 = JsonConvert.SerializeObject(dataPoints4);

			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

The marker type for the data-series can be changed using markerType property. markerColor, markerSize, markerBorderColor properties can be used to further customize them. Some other commonly used customization options include showInLegend, shared(toolTip), etc.

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