Stacked Column 100% Charts are similar to Stacked Column Charts except that the height of individual bars are calculated as a percentage of the total sum. Stacked Column 100% Charts are also referred to as Vertical Stacked Bar 100% Charts. Given example shows simple ASP.NET MVC Stacked Column 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", {
title: {
text: "Composition of Colors"
},
toolTip: {
shared: true
},
data: [{
type: "stackedColumn100",
name: "Red",
color:"rgba(255, 0, 0, .7)",
showInLegend: "true",
toolTipContent: "<b>{label}</b><br>{y}% of {name}",
dataPoints: @Html.Raw(ViewBag.DataPoints1)
},
{
type: "stackedColumn100",
name: "Green",
color: "rgba(0, 128, 0, .7)",
showInLegend: "true",
toolTipContent: "{y}% of {name}",
dataPoints: @Html.Raw(ViewBag.DataPoints2)
},
{
type: "stackedColumn100",
name: "Blue",
color: "rgba(0, 0, 255, .7)",
showInLegend: "true",
toolTipContent: "{y}% of {name}",
dataPoints: @Html.Raw(ViewBag.DataPoints3)
}]
});
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>();
dataPoints1.Add(new DataPoint("Silver", 75));
dataPoints1.Add(new DataPoint("Pink", 100));
dataPoints1.Add(new DataPoint("Coral", 100));
dataPoints1.Add(new DataPoint("Violet", 93));
dataPoints1.Add(new DataPoint("Purple", 50));
dataPoints1.Add(new DataPoint("Slate Blue", 42));
dataPoints1.Add(new DataPoint("Lime Green", 20));
dataPoints1.Add(new DataPoint("Chocolate", 82));
dataPoints2.Add(new DataPoint("Silver", 75));
dataPoints2.Add(new DataPoint("Pink", 75));
dataPoints2.Add(new DataPoint("Coral", 50));
dataPoints2.Add(new DataPoint("Violet", 51));
dataPoints2.Add(new DataPoint("Purple", 0));
dataPoints2.Add(new DataPoint("Slate Blue", 35));
dataPoints2.Add(new DataPoint("Lime Green", 80));
dataPoints2.Add(new DataPoint("Chocolate", 41));
dataPoints3.Add(new DataPoint("Silver", 75));
dataPoints3.Add(new DataPoint("Pink", 80));
dataPoints3.Add(new DataPoint("Coral", 31));
dataPoints3.Add(new DataPoint("Violet", 93));
dataPoints3.Add(new DataPoint("Purple", 50));
dataPoints3.Add(new DataPoint("Slate Blue", 80));
dataPoints3.Add(new DataPoint("Lime Green", 20));
dataPoints3.Add(new DataPoint("Chocolate", 11));
ViewBag.DataPoints1 = JsonConvert.SerializeObject(dataPoints1);
ViewBag.DataPoints2 = JsonConvert.SerializeObject(dataPoints2);
ViewBag.DataPoints3 = JsonConvert.SerializeObject(dataPoints3);
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;
}
}
color property can be used to change the color of data-series. You can also enable legends for all the series by setting showInLegend to true. Other commonly used customization options include fillOpacity, legendText, etc.
Note For step by step instructions, follow our ASP.NET MVC Integration Tutorial