Here is an example for adding Interactive Stacked Bar 100% Charts into your ASP.NET MVC Application using CanvasJS. In case of Stacked Bar 100% Charts, data points are stacked similar to “Stacked Bar” except that their individual height is calculated as a percentage of total sum. This allows you to compare individual contribution of Data Series to the whole.
Please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.
var chart = new CanvasJS.Chart("chartContainer", {
.
.
data: [{
type: "stackedBar100",
dataPoints: [
{ y: 6, label: "Apple" },
{ y: 4, label: "Mango" },
{ y: 5, label: "Orange" },
]
},
{
type: "stackedBar100",
dataPoints: [
{ y: 2, label: "Apple" },
{ y: 6, label: "Mango" },
{ y: 4, label: "Orange" },
]
}]
.
.
}
You can further customize these charts to enable features like Zooming, Panning, Exporting, etc. To know more about the available features, please refer to our getting started section.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<title>Stacked Bar 100% Chart</title>
</head>
<body>
<div id="chartContainer"></div>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: 'light2',
title: {
text: "Time Spent in Holiday Season"
},
animationEnabled: true,
axisY: {
title: "percent"
},
legend: {
horizontalAlign: 'center',
verticalAlign: 'bottom'
},
toolTip: {
shared: true,
content: "<span style='\"'color: {color};'\"'>{name}</span> : {y}min"
},
data: [
{
type: "stackedBar100",
showInLegend: true,
name: "With Friends",
dataPoints: [
{ y: 350, label: "George" },
{ y: 350, label: "Alex" },
{ y: 350, label: "Mike" },
{ y: 374, label: "Jake" },
{ y: 320, label: "Shah" },
{ y: 300, label: "Joe" },
{ y: 400, label: "Fin" },
{ y: 220, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Eating Out",
dataPoints: [
{ y: 250, label: "George" },
{ y: 280, label: "Alex" },
{ y: 350, label: "Mike" },
{ y: 274, label: "Jake" },
{ y: 320, label: "Shah" },
{ y: 320, label: "Joe" },
{ y: 280, label: "Fin" },
{ y: 420, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Reading",
dataPoints: [
{ y: 350, label: "George" },
{ y: 350, label: "Alex" },
{ y: 350, label: "Mike" },
{ y: 374, label: "Jake" },
{ y: 120, label: "Shah" },
{ y: 120, label: "Joe" },
{ y: 400, label: "Fin" },
{ y: 120, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Shopping",
dataPoints: [
{ y: 250, label: "George" },
{ y: 250, label: "Alex" },
{ y: 250, label: "Mike" },
{ y: 274, label: "Jake" },
{ y: 320, label: "Shah" },
{ y: 220, label: "Joe" },
{ y: 100, label: "Fin" },
{ y: 420, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Fitness",
dataPoints: [
{ y: 150, label: "George" },
{ y: 30, label: "Alex" },
{ y: 45, label: "Mike" },
{ y: 74, label: "Jake" },
{ y: 64, label: "Shah" },
{ y: 40, label: "Joe" },
{ y: 50, label: "Fin" },
{ y: 40, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Travel",
dataPoints: [
{ y: 150, label: "George" },
{ y: 170, label: "Alex" },
{ y: 150, label: "Mike" },
{ y: 174, label: "Jake" },
{ y: 120, label: "Shah" },
{ y: 160, label: "Joe" },
{ y: 100, label: "Fin" },
{ y: 80, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Internet",
dataPoints: [
{ y: 160, label: "George" },
{ y: 170, label: "Alex" },
{ y: 50, label: "Mike" },
{ y: 174, label: "Jake" },
{ y: 104, label: "Shah" },
{ y: 120, label: "Joe" },
{ y: 300, label: "Fin" },
{ y: 420, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
},
{
type: "stackedBar100",
showInLegend: true,
name: "Hobbies",
dataPoints: [
{ y: 80, label: "George" },
{ y: 150, label: "Alex" },
{ y: 50, label: "Mike" },
{ y: 74, label: "Jake" },
{ y: 40, label: "Shah" },
{ y: 120, label: "Joe" },
{ y: 100, label: "Fin" },
{ y: 120, label: "Larry" }
],
//dataPoints: @Html.Raw(ViewBag.DataPoints),
}
]
});
chart.render();
};
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ASPNET_MVC_Samples.Controllers
{
public class HomeController : Controller
{
public ActionResult StackedBar100()
{
return View();
}
}
}