100% Stacked Bar in ASP.NET MVC Charts Component

4 Oct 202310 minutes to read

100% Stacked bar

To render a 100% stacked bar series, use series Type as StackingBar100.

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
      XName("x").
      YName("yValue").
      DataSource(ViewBag.dataSource).
      Name("Gold").
      Add();

      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).   
      XName("x").
      YName("yValue1").
      DataSource(ViewBag.dataSource).
      Name("Silver").
      Add();
   })
   .PrimaryXAxis(px => 
         px.Interval(1)
            .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
            .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()
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 bar chart

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

@(Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
      XName("x").
      YName("y1").
      DataSource(ViewBag.dataSource).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
      XName("x").
      YName("y2").
      DataSource(ViewBag.dataSource).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      Add();
   })
   .Render())
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 100% Stacked Bar series.

@Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).  
      XName("x").
      YName("yValue").
      DashArray("5,5").
      Fill("blue").
      Opacity(0.7).
      Border(br => br.Width(2).Color("black")).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100).   
      XName("x").
      YName("yValue1").
      DashArray("5,5").
      Fill("green").
      Opacity(0.7).
      Border(br => br.Width(2).Color("black")).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
   .Render()
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