Stacked Area 100% Charts are similar to Stacked Area except that areas are rendered as a percentage of total value at any given point. Given example shows simple ASP.NET MVC Stacked Area 100% 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: "Profit Made by a Retail Store Chain" }, axisY: { title: "Amount (in USD)", prefix: "$", suffix: "K" }, axisX: { valueFormatString: "MMM", intervalType: "month", interval: 1 }, toolTip: { shared: true }, data: [{ type: "stackedArea100", name: "Store1", showInLegend: true, yValueFormatString: "$#,##0K", xValueType: "dateTime", xValueFormatString: "MMMM", dataPoints: @Html.Raw(ViewBag.DataPoints1) }, { type: "stackedArea100", name: "Store2", showInLegend: true, yValueFormatString: "$#,##0K", xValueType: "dateTime", dataPoints: @Html.Raw(ViewBag.DataPoints2) }, { type: "stackedArea100", name: "Store3", showInLegend: true, yValueFormatString: "$#,##0K", xValueType: "dateTime", dataPoints: @Html.Raw(ViewBag.DataPoints3) }, { type: "stackedArea100", name: "Store4", showInLegend: true, yValueFormatString: "$#,##0K", xValueType: "dateTime", dataPoints: @Html.Raw(ViewBag.DataPoints4) }] }); 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> dataPoints1 = new List<DataPoint>(); List<DataPoint> dataPoints2 = new List<DataPoint>(); List<DataPoint> dataPoints3 = new List<DataPoint>(); List<DataPoint> dataPoints4 = new List<DataPoint>(); dataPoints1.Add(new DataPoint(1483209000000, 65)); dataPoints1.Add(new DataPoint(1485887400000, 62)); dataPoints1.Add(new DataPoint(1488306600000, 65)); dataPoints1.Add(new DataPoint(1490985000000, 20)); dataPoints1.Add(new DataPoint(1493577000000, 36)); dataPoints1.Add(new DataPoint(1496255400000, 53)); dataPoints2.Add(new DataPoint(1483209000000, 85)); dataPoints2.Add(new DataPoint(1485887400000, 36)); dataPoints2.Add(new DataPoint(1488306600000, 15)); dataPoints2.Add(new DataPoint(1490985000000, 25)); dataPoints2.Add(new DataPoint(1493577000000, 65)); dataPoints2.Add(new DataPoint(1496255400000, 49)); dataPoints3.Add(new DataPoint(1483209000000, 63)); dataPoints3.Add(new DataPoint(1485887400000, 46)); dataPoints3.Add(new DataPoint(1488306600000, 21)); dataPoints3.Add(new DataPoint(1490985000000, 55)); dataPoints3.Add(new DataPoint(1493577000000, 46)); dataPoints3.Add(new DataPoint(1496255400000, 50)); dataPoints4.Add(new DataPoint(1483209000000, 45)); dataPoints4.Add(new DataPoint(1485887400000, 55)); dataPoints4.Add(new DataPoint(1488306600000, 33)); dataPoints4.Add(new DataPoint(1490985000000, 60)); dataPoints4.Add(new DataPoint(1493577000000, 39)); dataPoints4.Add(new DataPoint(1496255400000, 70)); ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1); ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2); ViewBag.DataPoints3 = JsonConvert.SerializeObject(dataPoints3); ViewBag.DataPoints4 = JsonConvert.SerializeObject(dataPoints4); 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; } }
You can assign different colors for the data-series in the chart using the color property. Other commonly used customization options include showInLegend, fillOpacity, markerType, etc.
Note For step by step instructions, follow our ASP.NET MVC Integration Tutorial