Column Chart in ASP.NET MVC Charts Component

25 Sep 202318 minutes to read

Column

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

CSHTML
Column.cs
@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.

CSHTML
Column-space.cs
@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.

CSHTML
Group-column.cs
@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.

CSHTML
Column-cylinder.cs
@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).
      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 },
        new CylindricalChartData { country= "Japan",     gold= 70 }, 
        new CylindricalChartData { country= "Australia", gold= 60 },
        new CylindricalChartData { country= "France",    gold= 50 }, 
        new CylindricalChartData { country= "Italy",     gold= 40 },
        new CylindricalChartData { country= "Sweden",    gold= 55 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class CylindricalChartData
{
    public string country;
    public double gold;
}

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 Color and Width of series border.

CSHTML
Column-series.cs
@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;
        }