Bar chart in ASP.NET Core 3D Chart Component

Bar chart

To render a bar series, use series Type as Bar.

<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-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Bar space and width

The ColumnSpacing and ColumnWidth properties are used to customize the space between bars.

<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-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" columnSpacing="0.5"
            columnWidth="0.75"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { country= "USA",       gold= 50,  silver= 70 },
        new ChartData { country= "China",     gold= 40,  silver= 60 },
        new ChartData { country= "Japan",     gold= 70,  silver= 60 },
        new ChartData { country= "Australia", gold= 60,  silver= 56 },
        new ChartData { country= "France",    gold= 50,  silver= 45 },
        new ChartData { country= "Germany",   gold= 40,  silver= 30 },
        new ChartData { country= "Italy",     gold= 40,  silver= 35 },
        new ChartData { country= "Sweden",    gold= 30,  silver= 25 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
    public double silver;
}

Grouped bar

The data points can be grouped in the bar type charts by using the GroupName property. Data points with same group name are grouped together.

<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-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="Year" yName="USA_Total"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" groupName="USA" columnSpacing="0.1"
            columnWidth="0.7"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="Year" yName="USA_Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" groupName="USA" columnSpacing="0.1"
            columnWidth="0.5"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="Year" yName="UK_Total"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" groupName="UK" columnSpacing="0.1"
            columnWidth="0.7"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="Year" yName="UK_Gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" groupName="UK" columnSpacing="0.1"
            columnWidth="0.5"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ColumnData> chartData = new List<ColumnData>
    {
        new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29 },
        new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27 },
        new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22 },
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ColumnData
{
    public string Year;
    public double USA_Total;
    public double USA_Gold;
    public double UK_Total;
    public double UK_Gold;
}

Cylindrical bar chart

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

<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-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar"
            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 { country= "USA",       gold= 50 },
        new ChartData { country= "China",     gold= 40 },
        new ChartData { country= "Japan",     gold= 70 },
        new ChartData { country= "Australia", gold= 60 },
        new ChartData { country= "France",    gold= 50 },
        new ChartData { country= "Germany",   gold= 40 },
        new ChartData { country= "Italy",     gold= 40 },
        new ChartData { country= "Sweden",    gold= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string country;
    public double gold;
}

Series customization

The following properties can be used to customize the Bar series.

  • Fill – Specifies the color of the series.
  • Opacity – Specifies the opacity of the Fill color.
<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-series-collection>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar" opacity="0.5" fill="blue"></e-chart3d-series>
    </e-chart3d-series-collection>
</ejs-chart3d>
public ActionResult Index()
{
    List<ChartData> chartData = new List<ChartData>
    {
        new ChartData { x= 2005,  y= 28 },
        new ChartData { x= 2006,  y= 25 },
        new ChartData { x= 2007,  y= 26 },
        new ChartData { x= 2008,  y= 27 },
        new ChartData { x= 2009,  y= 32 },
        new ChartData { x= 2010,  y= 35 },
        new ChartData { x= 2011,  y= 30 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public double x;
    public double y;
}