Area Charts are same as Line Charts except that the area chart shades the area that it covers. It is used to visualize cumulative value over a period of time or range. Given example shows simple ASP.NET MVC 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", { theme: "light2", animationEnabled: true, title: { text: "Power Produced by a Wind Turbine" }, axisX: { title: "Wind Speed (in m/s)" }, axisY: { title: "Instantaneous Power (in kW)" }, data: [{ type: "area", color: "#0BB5FF", markerSize: 0, toolTipContent: "Wind Speed: {x} m/s<br>Ins. Power: {y} kW", 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(1, 0)); dataPoints.Add(new DataPoint(2, 0)); dataPoints.Add(new DataPoint(3, 31)); dataPoints.Add(new DataPoint(4, 145)); dataPoints.Add(new DataPoint(5, 341)); dataPoints.Add(new DataPoint(6, 620)); dataPoints.Add(new DataPoint(7, 1007)); dataPoints.Add(new DataPoint(8, 1486)); dataPoints.Add(new DataPoint(9, 1857)); dataPoints.Add(new DataPoint(10, 1983)); dataPoints.Add(new DataPoint(11, 1994)); dataPoints.Add(new DataPoint(12, 1998)); dataPoints.Add(new DataPoint(13, 2000)); dataPoints.Add(new DataPoint(14, 2000)); dataPoints.Add(new DataPoint(15, 2000)); dataPoints.Add(new DataPoint(16, 2000)); dataPoints.Add(new DataPoint(17, 2000)); dataPoints.Add(new DataPoint(18, 2000)); dataPoints.Add(new DataPoint(19, 2000)); dataPoints.Add(new DataPoint(20, 2000)); dataPoints.Add(new DataPoint(21, 2000)); dataPoints.Add(new DataPoint(22, 1906)); dataPoints.Add(new DataPoint(23, 1681)); dataPoints.Add(new DataPoint(24, 1455)); dataPoints.Add(new DataPoint(25, 1230)); 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; } }
color and fillOpacity properties can be used to customize the filled area in an Area Chart. Other frequently used customization options include, lineColor, lineDashType, etc.