Stacked column chart in ASP.NET MVC 3D Chart Component

Stacked column chart

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

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).  
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y1").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y2").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= 2000,  y= 0.61,  y1= 0.03,  y2= 0.48 },
        new ChartData { x= 2001,  y= 0.81,  y1= 0.05,  y2= 0.53 },
        new ChartData { x= 2002,  y= 0.91,  y1= 0.06,  y2= 0.57 },
        new ChartData { x= 2003,  y= 1,     y1= 0.09,  y2= 0.61 },
        new ChartData { x= 2004,  y= 1.19,  y1= 0.14,  y2= 0.63 },
        new ChartData { x= 2005,  y= 1.47,  y1= 0.20,  y2= 0.64 },
        new ChartData { x= 2006,  y= 1.74,  y1= 0.29,  y2= 0.66 },
        new ChartData { x= 2007,  y= 1.98,  y1= 0.46,  y2= 0.76 },
        new ChartData { x= 2008,  y= 1.99,  y1= 0.64,  y2= 0.77 },
        new ChartData { x= 2009,  y= 1.70,  y1= 0.75,  y2= 0.55 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double x;
    public double y;
    public double y1;
    public double y2;
}

Stacking group

To group the stacked columns, the StackingGroup property can be used. The columns with same group name are stacked on top of each other.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).  
      XName("x").
      YName("y").
      StackingGroup("UKAndGermany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y1").
      StackingGroup("UKAndGermany").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y2").
      StackingGroup("UKAndGermany").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= 2000,  y= 0.61,  y1= 0.03,  y2= 0.48 },
        new ChartData { x= 2001,  y= 0.81,  y1= 0.05,  y2= 0.53 },
        new ChartData { x= 2002,  y= 0.91,  y1= 0.06,  y2= 0.57 },
        new ChartData { x= 2003,  y= 1,     y1= 0.09,  y2= 0.61 },
        new ChartData { x= 2004,  y= 1.19,  y1= 0.14,  y2= 0.63 },
        new ChartData { x= 2005,  y= 1.47,  y1= 0.20,  y2= 0.64 },
        new ChartData { x= 2006,  y= 1.74,  y1= 0.29,  y2= 0.66 },
        new ChartData { x= 2007,  y= 1.98,  y1= 0.46,  y2= 0.76 },
        new ChartData { x= 2008,  y= 1.99,  y1= 0.64,  y2= 0.77 },
        new ChartData { x= 2009,  y= 1.70,  y1= 0.75,  y2= 0.55 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double x;
    public double y;
    public double y1;
    public double y2;
}

Cylindrical stacked column chart

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

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      XName("x").
      YName("y").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).   
      XName("x").
      YName("y1").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).  
      XName("x").
      YName("y2").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= 2000,  y= 0.61,  y1= 0.03,  y2= 0.48 },
        new ChartData { x= 2001,  y= 0.81,  y1= 0.05,  y2= 0.53 },
        new ChartData { x= 2002,  y= 0.91,  y1= 0.06,  y2= 0.57 },
        new ChartData { x= 2003,  y= 1,     y1= 0.09,  y2= 0.61 },
        new ChartData { x= 2004,  y= 1.19,  y1= 0.14,  y2= 0.63 },
        new ChartData { x= 2005,  y= 1.47,  y1= 0.20,  y2= 0.64 },
        new ChartData { x= 2006,  y= 1.74,  y1= 0.29,  y2= 0.66 },
        new ChartData { x= 2007,  y= 1.98,  y1= 0.46,  y2= 0.76 },
        new ChartData { x= 2008,  y= 1.99,  y1= 0.64,  y2= 0.77 },
        new ChartData { x= 2009,  y= 1.70,  y1= 0.75,  y2= 0.55 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double x;
    public double y;
    public double y1;
    public double y2;
}

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 the Fill color.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).  
      XName("x").
      YName("y").
      Fill("green").
      Opacity(0.5).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y1").
      Fill("red").
      Opacity(0.5).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn).   
      XName("x").
      YName("y2").
      Fill("yellow").
      Opacity(0.5).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= 2000,  y= 0.61,  y1= 0.03,  y2= 0.48 },
        new ChartData { x= 2001,  y= 0.81,  y1= 0.05,  y2= 0.53 },
        new ChartData { x= 2002,  y= 0.91,  y1= 0.06,  y2= 0.57 },
        new ChartData { x= 2003,  y= 1,     y1= 0.09,  y2= 0.61 },
        new ChartData { x= 2004,  y= 1.19,  y1= 0.14,  y2= 0.63 },
        new ChartData { x= 2005,  y= 1.47,  y1= 0.20,  y2= 0.64 },
        new ChartData { x= 2006,  y= 1.74,  y1= 0.29,  y2= 0.66 },
        new ChartData { x= 2007,  y= 1.98,  y1= 0.46,  y2= 0.76 },
        new ChartData { x= 2008,  y= 1.99,  y1= 0.64,  y2= 0.77 },
        new ChartData { x= 2009,  y= 1.70,  y1= 0.75,  y2= 0.55 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double x;
    public double y;
    public double y1;
    public double y2;
}