Column chart in ASP.NET MVC 3D Chart Component

Column chart

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

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).Title("Olympic Medals")
   .Render())
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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("silver").
      ColumnSpacing(0.5).
      ColumnWidth(0.75).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   ).Title("Olympic Medals")
   .Render())
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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("Year").
      YName("USA_Total").
      ColumnSpacing(0.1).
      ColumnWidth(0.7).
      GroupName("USA").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("Year").
      YName("USA_Gold").
      ColumnSpacing(0.1).
      ColumnWidth(0.5).
      GroupName("USA").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("Year").
      YName("UK_Total").
      ColumnSpacing(0.1).
      ColumnWidth(0.7).
      GroupName("UK").
      DataSource(ViewBag.dataSource).
      Add();

      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("Year").
      YName("UK_Gold").
      ColumnSpacing(0.1).
      ColumnWidth(0.5).
      GroupName("UK").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Render())
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.

@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).
      ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
      XName("x").
      YName("y").
      ColumnWidth(0.9).
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Render())
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.

    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.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
   .Series(series =>
   {
      series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Column).  
      XName("country").
      YName("gold").
      Opacity(0.5).
      Fill("red").
      DataSource(ViewBag.dataSource).
      Add();
   })
   .PrimaryXAxis(px => 
      px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
   )
   .Render())
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;
}