Responsive ASP.NET MVC Charts & Graphs

Download ASP.NET Chart Samples

ASP.NET MVC Charts are responsive and runs across all devices including Desktop, Tablets & Phones. All Graphs are Cross-Browser compatible and have 10X better performance. The given example contains source code that you can try running locally.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2", // "light1", "dark1", "dark2"
	exportEnabled: true,
	title: {
		text: "Medals Won by Few Countries - 2016 Summer Olympics"
	},
	data: [{
		type: "column",
		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>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.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("USA", 121));
			dataPoints.Add(new DataPoint("Great Britain", 67));
			dataPoints.Add(new DataPoint("China", 70));
			dataPoints.Add(new DataPoint("Russia", 56));
			dataPoints.Add(new DataPoint("Germany", 42));
			dataPoints.Add(new DataPoint("Japan", 41));
			dataPoints.Add(new DataPoint("France", 42));
			dataPoints.Add(new DataPoint("South Korea", 21));

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

Chart Customizations

You can change the chart type by using the type property. Some of the other commonly used customization options include color, animationEnabled, theme, title, etc.

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