Stacked Bar in ASP.NET CORE Charts Component

25 Sep 202314 minutes to read

Stacked bar

To render a stacked bar series, use series Type as StackingBar.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Stacking group

You can use the StackingGroup property to group the stacked bar and 100% stacked bar. Columns with same group name are stacked on top of each other.

<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" name="India"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" stackingGroup="a"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="India"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar" stackingGroup="b"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Cylindrical stacked bar chart

To render a cylindrical stacked bar chart, set the ColumnFacet property to Cylinder in the chart series.

<ejs-chart id="container">
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y1"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y2"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
{
    List<CylinderChartData> chartData = new List<CylinderChartData>
    {
        new CylinderChartData { x: 2000, y: 0.61, y1: 0.03, y2: 0.48 },
        new CylinderChartData { x: 2001, y: 0.81, y1: 0.05, y2: 0.53 },
        new CylinderChartData { x: 2002, y: 0.91, y1: 0.06, y2: 0.57 },
        new CylinderChartData { x: 2003, y: 1,    y1: 0.09, y2: 0.61 },
        new CylinderChartData { x: 2004, y: 1.19, y1: 0.14, y2: 0.63 },
        new CylinderChartData { x: 2005, y: 1.47, y1: 0.20, y2: 0.64 },
        new CylinderChartData { x: 2006, y: 1.74, y1: 0.29, y2: 0.66 },
        new CylinderChartData { x: 2007, y: 1.98, y1: 0.46, y2: 0.76 },
        new CylinderChartData { x: 2008, y: 1.99, y1: 0.64, y2: 0.77 },
        new CylinderChartData { x: 2009, y: 1.70, y1: 0.75, y2: 0.55 }              
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class CylinderChartData
{
    public double x;
    public double y;
    public double y1;
    public double y2;
}

Series customization

The following properties can be used to customize the Stacked Bar series.

<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" fill="blue" dashArray="5,5" opacity="0.7"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" fill="green" dashArray="5,5" opacity="0.7"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

See also