Column chart in ASP.NET Core 3D Chart Component

Column chart

To render a column series, use series Type as Column.

<ejs-chart3d id="container" title="Olympic Medals" 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.Column"></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;
}

Column space and width

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

<ejs-chart3d id="container" title="Olympic Medals" 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.Column"></e-chart3d-series>
        <e-chart3d-series dataSource="ViewBag.dataSource" xName="country" yName="silver"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column" 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 column

The data points can be grouped in the column 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.Column" 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.Column" 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.Column" 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.Column" 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 column chart

To render a cylindrical column 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="x" yName="y" columnWidth="0.9"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column"
            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= "Czechia",      y= 1.11 },
        new ChartData { x= "Spain",        y= 1.66 },
        new ChartData { x= "USA",          y= 1.56 },
        new ChartData { x= "Germany",      y= 3.1  },
        new ChartData { x= "Russia",       y= 1.35 },
        new ChartData { x= "Slovakia",     y= 1    },
        new ChartData { x= "South Korea",  y= 3.16 },
        new ChartData { x= "France",       y= 0.92 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ChartData
{
    public string x;
    public double y;
}

Series customization

The following properties can be used to customize the Column 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="country" yName="gold"
            type="@Syncfusion.EJ2.Charts.Chart3DSeriesType.Column" opacity="0.5" fill="red"></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;
}