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

Stacked bar chart

To render a stacked bar series, use series Type as StackingBar.

@(Html.EJS().Chart3D("container").EnableRotation(true).Rotation(22).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).  
      XName("x").
      YName("y").      
      Name("America").
      DataSource(ViewBag.dataSource).
      Add();

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

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).   
      XName("x").
      YName("y2").
      Name("France").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(20)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Sochi",        y= 9,    y1= 10,  y2= 4  },
        new ChartData { x= "Rio",          y= 46,   y1= 4,   y2= 10 },
        new ChartData { x= "Pyeongchang",  y= 9,    y1= 11,  y2= 5  },
        new ChartData { x= "Tokyo",        y= 39,   y1= 7,   y2= 10 },
        new ChartData { x= "Beijing",      y= 8,    y1= 4,   y2= 5  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}

Stacking group

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

@(Html.EJS().Chart3D("container").EnableRotation(true).Rotation(22).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).  
      XName("x").
      YName("y").      
      Name("America").
      StackingGroup("JohnAndAndrew").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).   
      XName("x").
      YName("y1").
      Name("Canada").
      StackingGroup("JohnAndAndrew").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).   
      XName("x").
      YName("y2").
      Name("France").
      StackingGroup("ThomasAndMichael").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(20)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Sochi",        y= 9,    y1= 10,  y2= 4  },
        new ChartData { x= "Rio",          y= 46,   y1= 4,   y2= 10 },
        new ChartData { x= "Pyeongchang",  y= 9,    y1= 11,  y2= 5  },
        new ChartData { x= "Tokyo",        y= 39,   y1= 7,   y2= 10 },
        new ChartData { x= "Beijing",      y= 8,    y1= 4,   y2= 5  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}

Cylindrical stacked bar chart

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

@(Html.EJS().Chart3D("container").EnableRotation(true).Rotation(22).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).  
      XName("x").
      YName("y").      
      Name("America").
      DataSource(ViewBag.dataSource).
      Add();

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

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder). 
      XName("x").
      YName("y2").
      Name("France").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(20)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Sochi",        y= 9,    y1= 10,  y2= 4  },
        new ChartData { x= "Rio",          y= 46,   y1= 4,   y2= 10 },
        new ChartData { x= "Pyeongchang",  y= 9,    y1= 11,  y2= 5  },
        new ChartData { x= "Tokyo",        y= 39,   y1= 7,   y2= 10 },
        new ChartData { x= "Beijing",      y= 8,    y1= 4,   y2= 5  }
    };
    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 Stacked Bar series.

  • Fill – Specifies the color of the series.
  • Opacity – Specifies the opacity of the Fill color.
@(Html.EJS().Chart3D("container").EnableRotation(true).Rotation(22).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).  
      XName("x").
      YName("y").      
      Name("America").
      Fill("red").
      Opacity(0.7).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).   
      XName("x").
      YName("y1").
      Name("Canada").
      Fill("green").
      Opacity(0.7).
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar).   
      XName("x").
      YName("y2").
      Name("France").
      Fill("yellow").
      Opacity(0.7).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .PrimaryYAxis(py => 
      py.Interval(20)
   )
   .LegendSettings(leg => leg.EnableHighlight(true))
   .Render())
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "Sochi",        y= 9,    y1= 10,  y2= 4  },
        new ChartData { x= "Rio",          y= 46,   y1= 4,   y2= 10 },
        new ChartData { x= "Pyeongchang",  y= 9,    y1= 11,  y2= 5  },
        new ChartData { x= "Tokyo",        y= 39,   y1= 7,   y2= 10 },
        new ChartData { x= "Beijing",      y= 8,    y1= 4,   y2= 5  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
}