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

Stacked column chart

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

CSHTML

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Stackedcolumn.cs

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.

CSHTML

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" stackingGroup="UKAndGermany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" stackingGroup="UKAndGermany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" stackingGroup="UKAndGermany"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Group-stackedcolumn.cs

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.

CSHTML

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Stackedcolumn-cylinder.cs

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.

CSHTML

<ejs-chart3d id="container" wallColor="transparent" enableRotation="true" rotation="7" tilt="10" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" fill="green" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" fill="red" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" fill="yellow" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingColumn"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>

Stackedcolumn-series.cs

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;
}