Stacked Column in ASP.NET MVC Charts Component

4 Oct 202314 minutes to read

Stacked column

To render a stacked column series, use series Type as StackingColumn.

CSHTML

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

      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).   
      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()

Stackedcolumn.cs

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 columns and 100% stacked columns. Columns with same group name are stacked on top of each other.

CSHTML

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

      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).   
      XName("x").
      YName("yValue1").
      DataSource(ViewBag.dataSource).
      StackingGroup("second").
      Name("Silver").
      Add();
   })
   .PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
         .IsIndexed(true)
   )
   .Title("Olympic Medal Counts - RIO").Render()

Group.cs

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 column chart

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

CSHTML

@(Html.EJS().Chart("container").Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
      XName("x").
      YName("y").
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      DataSource(ViewBag.dataSource).
      Name("UK").
      Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
      XName("x").
      YName("y1").
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      DataSource(ViewBag.dataSource).
      Name("Germany").
      Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
      XName("x").
      YName("y2").
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      DataSource(ViewBag.dataSource).
      Name("France").
      Add();
      series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).  
      XName("x").
      YName("y3").
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      DataSource(ViewBag.dataSource).
      Name("Italy").
      Add();
   })
   .PrimaryXAxis(px => 
      px.Interval(1)
         .ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
         .Title("Years")
   )
   .PrimaryYAxis(py => 
      py.Title("Sales in Billions")
         .Interval(100).Minimum(0).Maximum(700).LabelFormat("{value}B")
       )
   .Render())

Stackedcolumn-cylinder.cs

public ActionResult Index()
{
    List<CylindricalChartData> chartData = new List<CylindricalChartData>
    {
        new CylindricalChartData { x= "2014", y= 111.1, y1= 76.9,  y2= 66.1,  y3= 34.1 },
        new CylindricalChartData { x= "2015", y= 127.3, y1= 99.5,  y2= 79.3,  y3= 38.2 },
        new CylindricalChartData { x= "2016", y= 143.4, y1= 121.7, y2= 91.3,  y3= 44.0 },
        new CylindricalChartData { x= "2017", y= 159.9, y1= 142.5, y2= 102.4, y3= 51.6 },
        new CylindricalChartData { x= "2018", y= 175.4, y1= 166.7, y2= 112.9, y3= 61.9 },
        new CylindricalChartData { x= "2019", y= 189.0, y1= 182.9, y2= 122.4, y3= 71.5 },
        new CylindricalChartData { x= "2020", y= 202.7, y1= 197.3, y2= 120.9, y3= 82.0 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class CylindricalChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
    public double y3;
}

Series customization

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

• Fill – Specifies the color of the series.
• Opacity – Specifies the opacity of Fill.
• DashArray – Specifies the dashes for series.
• ChartSeriesBorder – Specifies the Color and Width of series border.

CSHTML

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

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

Stackedcolumn-series.cs

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

• Data Label
• Tooltip