Bar chart in ASP.NET MVC 3D Chart Component
Bar chart
To render a bar series, use series Type as Bar.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("country").
YName("gold").
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;
}Bar space and width
The ColumnSpacing and ColumnWidth properties are used to customize the space between bars.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("country").
YName("gold").
DataSource(ViewBag.dataSource).
Add();
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("country").
YName("silver").
ColumnSpacing(0.5).
ColumnWidth(0.75).
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, 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.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("Year").
YName("USA_Total").
ColumnSpacing(0.1).
ColumnWidth(0.7).
GroupName("USA").
DataSource(ViewBag.dataSource).
Add();
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("Year").
YName("USA_Gold").
ColumnSpacing(0.1).
ColumnWidth(0.5).
GroupName("USA").
DataSource(ViewBag.dataSource).
Add();
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("Year").
YName("UK_Total").
ColumnSpacing(0.1).
ColumnWidth(0.7).
GroupName("UK").
DataSource(ViewBag.dataSource).
Add();
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
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 bar chart
To render a cylindrical bar 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.Bar).
ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
XName("country").
YName("gold").
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;
}Series customization
The following properties can be used to customize the Bar series.
@(Html.EJS().Chart3D("container").WallColor("transparent").EnableRotation(true).Rotation(7).Tilt(10).Depth(100)
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.Chart3DSeriesType.Bar).
XName("x").
YName("y").
Opacity(0.5).
Fill("blue").
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= 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;
}