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

Stacked bar chart

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

<ejs-chart3d id="container" enableRotation="true" rotation="22" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis interval="20"></e-chart3d-primaryyaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="America"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Canada"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="France"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
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.

<ejs-chart3d id="container" enableRotation="true" rotation="22" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis interval="20"></e-chart3d-primaryyaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="America"
            stackingGroup="JohnAndAndrew"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Canada"
            stackingGroup="JohnAndAndrew"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="France"
            stackingGroup="ThomasAndMichael"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
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.

<ejs-chart3d id="container" enableRotation="true" rotation="22" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis interval="20"></e-chart3d-primaryyaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="America"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Canada"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="France"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
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.
<ejs-chart3d id="container" enableRotation="true" rotation="22" depth="100">
    <e-chart3d-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category"></e-chart3d-primaryxaxis>
    <e-chart3d-primaryyaxis interval="20"></e-chart3d-primaryyaxis>
    <e-chart3d-legendsettings enableHighlight="true">
    </e-chart3d-legendsettings>
    <e-chart3d-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="America" fill="red" opacity="0.7"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Canada" fill="green" opacity="0.7"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="France" fill="yellow" opacity="0.7"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
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;
}