Stacked Bar Chart

ASP.NET MVC Stacked Bar Chart Sample using CanvasJS

Here is an example for adding Interactive Stacked Bar Charts into your ASP.NET MVC Application using CanvasJS. Stacked Bar Charts have data points stacked one on top of the other instead of placing them side-by-side. This allows you to compare the contribution of different data series to the total at a given point. You should use Stacked bar when multiple data-series can be added up to show combined result like total sales of various products, etc.

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.


Download ASP.Net MVC Chart Samples

var chart = new CanvasJS.Chart("chartContainer", {
.
.
data: [{
    type: "stackedBar",
    dataPoints: [
        { y: 6, label: "Apple" },
	{ y: 4, label: "Mango" },
	{ y: 5, label: "Orange" },
    ]
},
{
    type: "stackedBar",
    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="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title>Stacked Bar Chart</title>
</head>
<body>
    <div id="chartContainer"></div>

    <script type="text/javascript">
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Cost Of Pancake Ingredients, 2011"
                },
                animationEnabled: true,
                axisY2: {
                    valueFormatString: "$ 0",
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    verticalAlign: "top",
                    horizontalAlign: "center"
                },

                data: [
                {
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Butter (500gms)",
                    axisYType: "secondary",
                    color: "#7E8F74",
                    dataPoints: [
                        { y: 3, label: "India" },
                        { y: 5, label: "US" },
                        { y: 3, label: "Germany" },
                        { y: 6, label: "Brazil" },
                        { y: 7, label: "China" },
                        { y: 5, label: "Australia" },
                        { y: 5, label: "France" },
                        { y: 7, label: "Italy" },
                        { y: 9, label: "Singapore" },
                        { y: 8, label: "Switzerland" },
                        { y: 12, label: "Japan" }
                    ],

                    //dataPoints: @Html.Raw(ViewBag.DataPoints),
                },
                {
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Flour (1kg)",
                    axisYType: "secondary",
                    color: "#F0E6A7",
                    dataPoints: [
                        { y: .5, label: "India" },
                        { y: 1.5, label: "US" },
                        { y: 1, label: "Germany" },
                        { y: 2, label: "Brazil" },
                        { y: 2, label: "China" },
                        { y: 2.5, label: "Australia" },
                        { y: 1.5, label: "France" },
                        { y: 1, label: "Italy" },
                        { y: 2, label: "Singapore" },
                        { y: 2, label: "Switzerland" },
                        { y: 3, label: "Japan" }
                    ],

                    //dataPoints: @Html.Raw(ViewBag.DataPoints),
                },
                {
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Milk (2l)",
                    axisYType: "secondary",
                    color: "#EBB88A",
                    dataPoints: [
                        { y: 2, label: "India" },
                        { y: 3, label: "US" },
                        { y: 3, label: "Germany" },
                        { y: 3, label: "Brazil" },
                        { y: 4, label: "China" },
                        { y: 3, label: "Australia" },
                        { y: 4.5, label: "France" },
                        { y: 4.5, label: "Italy" },
                        { y: 6, label: "Singapore" },
                        { y: 3, label: "Switzerland" },
                        { y: 6, label: "Japan" }
                    ],

                    //dataPoints: @Html.Raw(ViewBag.DataPoints),
                },
                {
                    type: "stackedBar",
                    showInLegend: true,
                    name: "Eggs (20)",
                    axisYType: "secondary",
                    color: "#DB9079",
                    indexLabel: "$#total",
                    indexLabelPlacement: "outside",
                    dataPoints: [
                        { y: 2, label: "India" },
                        { y: 3, label: "US" },
                        { y: 6, label: "Germany" },
                        { y: 4, label: "Brazil" },
                        { y: 4, label: "China" },
                        { y: 8, label: "Australia" },
                        { y: 8, label: "France" },
                        { y: 8, label: "Italy" },
                        { y: 4, label: "Singapore" },
                        { y: 11, label: "Switzerland" },
                        { y: 6, label: "Japan" }
                    ],

                    //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 StackedBar()
        {
            return View();
        }
    }
}			


In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.