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

100% Stacked bar chart

To render a 100% stacked bar series, use series Type as StackingBar100.

<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-primaryyaxis interval="25"></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="General Motors"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Honda"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="Suzuki"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
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 bar chart

To render a cylindrical 100% 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="General Motors"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Honda"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="Suzuki"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y3" name="BMW"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"
            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= "2013", y= 9628912, y1= 4298390, y2= 2842133, y3= 2006366 },
        new ChartData { x= "2014", y= 9609326, y1= 4513769, y2= 3016710, y3= 2165566 },
        new ChartData { x= "2015", y= 7485587, y1= 4543838, y2= 3034081, y3= 2279503 },
        new ChartData { x= "2016", y= 7793066, y1= 4999266, y2= 2945295, y3= 2359756 },
        new ChartData { x= "2017", y= 6856880, y1= 5235842, y2= 3302336, y3= 2505741 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
    public double y3;
}

Series customization

The following properties can be used to customize the 100% 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="General Motors" fill="red"
            opacity="0.6" type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y1" name="Honda" fill="green" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y2" name="Suzuki" fill="yellow" opacity="0.6"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y3" name="BMW" fill="blue" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.StackingBar100"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= "2013", y= 9628912, y1= 4298390, y2= 2842133, y3= 2006366 },
        new ChartData { x= "2014", y= 9609326, y1= 4513769, y2= 3016710, y3= 2165566 },
        new ChartData { x= "2015", y= 7485587, y1= 4543838, y2= 3034081, y3= 2279503 },
        new ChartData { x= "2016", y= 7793066, y1= 4999266, y2= 2945295, y3= 2359756 },
        new ChartData { x= "2017", y= 6856880, y1= 5235842, y2= 3302336, y3= 2505741 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
    public double y1;
    public double y2;
    public double y3;
}