100% Stacked Column in ASP.NET CORE Charts Component

4 Oct 202311 minutes to read

100% Stacked column

To render a 100% stacked column series, use series Type as StackingColumn100.

<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.StackingColumn100"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="Germany"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100"></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;
        }

100% Cylindrical stacked column chart

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

<ejs-chart id="container" title="Gross Domestic Product Growth" width="50%">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" labelFormat="y" interval="1"
        title="Years"></e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="GDP (%) Per Annum" labelFormat="{value}%"
        rangePadding="@Syncfusion.EJ2.Charts.ChartRangePadding.None">
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="UK"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Germany"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="France"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y3" name="Italy"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
{
    List<CylindricalChartData> chartData = new List<CylindricalChartData>
    {
        new CylindricalChartData { x= new DateTime(2006, 01, 01), y= 900, y1= 190, y2= 250, y3= 150 },
        new CylindricalChartData { x= new DateTime(2007, 01, 01), y= 544, y1= 226, y2= 145, y3= 120 }, 
        new CylindricalChartData { x= new DateTime(2008, 01, 01), y= 880, y1= 194, y2= 190, y3= 115 },
        new CylindricalChartData { x= new DateTime(2009, 01, 01), y= 675, y1= 250, y2= 220, y3= 125 }, 
        new CylindricalChartData { x= new DateTime(2010, 01, 01), y= 765, y1= 222, y2= 225, y3= 132 },
        new CylindricalChartData { x= new DateTime(2011, 01, 01), y= 679, y1= 181, y2= 135, y3= 137 },
        new CylindricalChartData { x= new DateTime(2012, 01, 01), y= 770, y1= 128, y2= 152, y3= 110 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class CylindricalChartData
{
    public DateTime x;
    public double y;
    public double y1;
    public double y2;
    public double y3;
}

Series customization

The following properties can be used to customize the 100% Stacked Column 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" dashArray="5,5" fill="red" opacity="0.7"
            stackingGroup="Asia" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" dashArray="5,5" fill="blue" opacity="0.7"
            stackingGroup="Asia" type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100">
            <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