ASP.NET MVC Bar Charts & Graphs

Download ASP.NET Chart Samples

Bar charts use horizontal rectangular bars to compare value between different categories / data-series. Given example shows simple ASP.NET MVC Bar 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: "Women Nobel Laureates"
	},
	subtitles: [{
		text: "from 1903 to 2015"
	}],
	axisY: {
		title: "Number of Nobel Prizes",
		gridThickness: 0
	},
	data: [{
		type: "bar",
		indexLabel: "{y}",
		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("Economics", 1));
			dataPoints.Add(new DataPoint("Physics", 2));
			dataPoints.Add(new DataPoint("Literature", 4));
			dataPoints.Add(new DataPoint("Chemistry", 4));
			dataPoints.Add(new DataPoint("Literature", 9));
			dataPoints.Add(new DataPoint("Physiology or Medicine", 11));
			dataPoints.Add(new DataPoint("Peace", 13));

			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

indexLabel property can be used to show Index / Data Labels for the data-points. You can also enable legend for data-series by setting showInLegend to true. Some other commonly used customization options include dataPointWidth, color, fillOpacity, etc.

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