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

100% Stacked column chart

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

CSHTML

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

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

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn100).   
      XName("x").
      YName("y2").
      Name("Suzuki").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(25)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())

Stackedcolumn100.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "2013", y= 9628912, y1= 4298390, y2= 2842133 },
        new ChartData { x= "2014", y= 9609326, y1= 4513769, y2= 3016710 },
        new ChartData { x= "2015", y= 7485587, y1= 4543838, y2= 3034081 },
        new ChartData { x= "2016", y= 7793066, y1= 4999266, y2= 2945295 },
        new ChartData { x= "2017", y= 6856880, y1= 5235842, y2= 3302336 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}

100% Cylindrical stacked column chart

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

CSHTML

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

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

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn100).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).   
      XName("x").
      YName("y2").
      Name("Suzuki").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(25)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())

Stackedcolumn100-cylinder.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "2013", y= 9628912, y1= 4298390, y2= 2842133 },
        new ChartData { x= "2014", y= 9609326, y1= 4513769, y2= 3016710 },
        new ChartData { x= "2015", y= 7485587, y1= 4543838, y2= 3034081 },
        new ChartData { x= "2016", y= 7793066, y1= 4999266, y2= 2945295 },
        new ChartData { x= "2017", y= 6856880, y1= 5235842, y2= 3302336 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}

Series customization

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

• Fill – Specifies the color of the series.
• Opacity – Specifies the opacity of the Fill color.

CSHTML

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

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn100).
      XName("x").
      YName("y1").
      Name("Honda").
      Fill("green").
      Opacity(0.6).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn100).
      XName("x").
      YName("y2").
      Name("Suzuki").
      Fill("yellow").
      Opacity(0.6).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(25)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())

Stackedcolumn-100-series.cs

public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "2013", y= 9628912, y1= 4298390, y2= 2842133 },
        new ChartData { x= "2014", y= 9609326, y1= 4513769, y2= 3016710 },
        new ChartData { x= "2015", y= 7485587, y1= 4543838, y2= 3034081 },
        new ChartData { x= "2016", y= 7793066, y1= 4999266, y2= 29452956 },
        new ChartData { x= "2017", y= 6856880, y1= 5235842, y2= 3302336 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}