ASP.NET MVC Waterfall Charts with Custom Colors

Download ASP.NET Chart Samples

Waterfall Charts are useful for understanding the cumulative effect of positive and negative changes to an initial value and are mostly used as Financial Charts. The given example shows ASP.NET MVC Waterfall Chart with custom colors. 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", {
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	animationEnabled: true,
	title: {
		text: "Monthly Profit / Loss of a Company"
	},
	axisX: {
		interval: 1
	},
	axisY: {
		valueFormatString: "$#,##0,.K"
	},
	data: [{
		type: "waterfall",
		yValueFormatString: "$#,##0,.00K",
		indexLabelOrientation: "vertical",
		indexLabelFontColor: "black",
		risingColor: "#73C2FB",
		fallingColor: "#FFA571",
		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("Initial", 7655));
			dataPoints.Add(new DataPoint("Jan", 5312));
			dataPoints.Add(new DataPoint("Feb", 4065));
			dataPoints.Add(new DataPoint("Mar", -2564));
			dataPoints.Add(new DataPoint("Apr", 7004));
			dataPoints.Add(new DataPoint("May", 8324));
			dataPoints.Add(new DataPoint("Jun", -4543));
			dataPoints.Add(new DataPoint("July", -2008));
			dataPoints.Add(new DataPoint("Aug", 2673));
			dataPoints.Add(new DataPoint("Sep", -4497));
			dataPoints.Add(new DataPoint("Oct", 1654));
			dataPoints.Add(new DataPoint("Nov", 4943));
			dataPoints.Add(new DataPoint("Dec", 5324));
			dataPoints.Add(new DataPoint("Final", true, "{y}"));

			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;
		}

		public DataPoint(string label, bool isCumulativeSum, string indexLabel)
		{
			this.Label = label;
			this.IsCumulativeSum = isCumulativeSum;
			this.IndexLabel = indexLabel;
		}

		//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;

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

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

Chart Customizations

The rise and fall in the data-points can be shown in different colors using risingColor and fallingColor properties. Some other commonly used customization options include indexLabel, showInLegend, etc.

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