ASP.NET MVC Spline Area Charts & Graphs

Download ASP.NET Chart Samples

Spline Area Charts are similar to Area Charts except that the envelope of area is a smooth curve. Spline Area Charts are also referred as curved / smoothed area chart. Given example shows ASP.NET MVC Spline 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: "Tiger Population in India (1993 - 2018)"
	},
	axisX: {
		valueFormatString: "YYYY"
	},
	data: [{
		type: "splineArea",
		color: "#F4A12B",
		lineColor: "black",
		markerColor: "black",
		xValueType: "dateTime",
		xValueFormatString: "YYYY",
		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(725826600000, 3750));
			dataPoints.Add(new DataPoint(852057000000, 3508));
			dataPoints.Add(new DataPoint(978287400000, 3642));
			dataPoints.Add(new DataPoint(1104517800000, 2000));
			dataPoints.Add(new DataPoint(1136053800000, 1411));
			dataPoints.Add(new DataPoint(1262284200000, 1706));
			dataPoints.Add(new DataPoint(1388514600000, 2226));
			dataPoints.Add(new DataPoint(1514745000000, 2967));

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

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

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

Chart Customizations

The enveloping line in spline area charts can be customized by using lineDashType, lineColor and lineThickness properties. You can also customize the markers using markerColor, markerBorderColor properties. Other frequently used customization options are markerType, showInLegend, etc.

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