Column Chart in ASP.NET MVC Charts Component
4 Oct 202319 minutes to read
Column
To render a column series, use series Type as Column.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Name("Gold").
Add();
})
.PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.IsIndexed(true)
)
.Title("Olympic Medal Counts - RIO").Render()public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}Column space and width
The ColumnSpacing and ColumnWidth properties are used to customize the space between columns.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
ColumnSpacing(0.2).
ColumnWidth(0.2).
Add();
})
.PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category))
.Render()public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}Grouped column
You can use the GroupName property to group the data points in the column type charts. Data points with same group name are grouped together.
@Html.EJS().Chart("container")
.PrimaryXAxis(px =>
px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
.MajorGridLines(mg => mg.Width(0))
.Interval(1))
.PrimaryYAxis(py =>
py.LabelStyle(ls => ls.Color("transparent"))
.LineStyle(ls => ls.Width(0))
.MajorTickLines(mt => mt.Width(0))
.MajorGridLines(mg => mg.Width(0))
.MinorGridLines(mg => mg.Width(0)))
.ChartArea(area => area.Border(br => br.Width(0)))
.Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("USA_Total")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("USA Total").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("USA_Gold")
.Width(2).ColumnWidth(0.5).Opacity(0.4).ColumnSpacing(0.1).Name("USA Gold").GroupName("USA")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("UK_Total")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("UK Total").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("UK_Gold")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("UK Gold").GroupName("UK")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("China_Total")
.Width(2).ColumnWidth(0.7).ColumnSpacing(0.1).Name("China Total").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("Year").YName("China_Gold")
.Width(2).ColumnWidth(0.5).ColumnSpacing(0.1).Name("China Gold").GroupName("China")
.Marker(marker => marker.DataLabel(label => label.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top)
.Font(font => font.FontWeight("600").Color("#FFFFFF")))).DataSource(ViewBag.data).Add();
})
.Title("Olympics Medal Tally").Load("load")
.Tooltip(tooltip => tooltip.Enable(true)).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, China_Total = 91, China_Gold = 38},
new ColumnData { Year = "2016", USA_Total = 121, USA_Gold = 46, UK_Total = 67, UK_Gold = 27, China_Total = 70, China_Gold = 26},
new ColumnData { Year = "2020", USA_Total = 113, USA_Gold = 39, UK_Total = 65, UK_Gold = 22, China_Total = 88, China_Gold = 38},
};
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;
public double China_Total;
public double China_Gold;
}Cylindrical column chart
To render a cylindrical column chart, set the ColumnFacet property to Cylinder in the chart series.
@(Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("country").
YName("gold").
ColumnFacet(Syncfusion.EJ2.Charts.ShapeType.Cylinder).
DataSource(ViewBag.dataSource).
TooltipMappingName("tooltipMappingName").
Add();
})
.PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.PrimaryYAxis(py =>
py.Title("Medal Count")
.Interval(10).Minimum(0).Maximum(80)
)
.Title("Olympic Gold Medal Counts - RIO")
.Tooltip(tt => tt.Enable(true).Header("<b>${point.tooltip}</b>").Format("Gold Medal: <b>${point.y}</b>")).Render())public ActionResult Index()
{
List<CylindricalChartData> chartData = new List<CylindricalChartData>
{
new CylindricalChartData { country= "USA", gold= 50, tooltipMappingName= "USA" },
new CylindricalChartData { country= "Japan", gold= 70, tooltipMappingName= "Japan" },
new CylindricalChartData { country= "Australia", gold= 60, tooltipMappingName= "Australia" },
new CylindricalChartData { country= "France", gold= 50, tooltipMappingName= "France" },
new CylindricalChartData { country= "Italy", gold= 40, tooltipMappingName= "Italy" },
new CylindricalChartData { country= "Sweden", gold= 55, tooltipMappingName= "Sweden" }
};
ViewBag.dataSource = chartData;
return View();
}
public class CylindricalChartData
{
public string country;
public double gold;
public string tooltipMappingName;
}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 Fill.
- DashArray – Specifies the dashes for series.
-
ChartSeriesBorder – Specifies the
ColorandWidthof series border.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).
XName("x").
YName("y").
DataSource(ViewBag.dataSource).
Opacity(0.5).
DashArray("5,5").
Fill("blue").
Add();
})
.PrimaryXAxis(px =>
px.Interval(1)
.ValueType(Syncfusion.EJ2.Charts.ValueType.Category)
)
.Render()public ActionResult Index()
{
List<AxisLabelData> chartData = new List<AxisLabelData>
{
new AxisLabelData { x= "South Korea", y= 39.4 },
new AxisLabelData { x= "India", y= 61.3 },
new AxisLabelData { x= "Pakistan", y= 20.4 },
new AxisLabelData { x= "Germany", y= 65.1 },
new AxisLabelData { x= "Australia", y= 15.8 },
new AxisLabelData { x= "Italy", y= 29.2 },
new AxisLabelData { x= "United Kingdom", y= 44.6 },
new AxisLabelData { x= "Saudi Arabia", y= 9.7 },
new AxisLabelData { x= "Russia", y= 40.8 },
new AxisLabelData { x= "Mexico", y= 31 },
new AxisLabelData { x= "Brazil", y= 75.9 },
new AxisLabelData { x= "China", y= 51.4 }
};
ViewBag.dataSource = chartData;
return View();
}
public class AxisLabelData
{
public string x;
public double y;
}