Column Chart in ASP.NET CORE Charts Component

4 Oct 202321 minutes to read

Column

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

CSHTML
Column.cs
<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>
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
<ejs-chart id="container" width="60%">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" columnSpacing="0.2" columnWidth="0.2"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>
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
<ejs-chart id="container" title="Olympics Medal Tally">
    <e-chart-tooltipsettings enable="true">
    </e-chart-tooltipsettings>
    <e-chart-primaryxaxis valueType="Category" interval=1>
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis>
        <e-majorgridlines width="0"></e-majorgridlines>
        <e-majorticklines width="0"></e-majorticklines>
        <e-linestyle width="0"></e-linestyle>
        <e-labelstyle color="transparent"></e-labelstyle>
    </e-chart-primaryyaxis>
    <e-chart-chartarea>
        <e-chartarea-border width="0"></e-chartarea-border>
    </e-chart-chartarea>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Total' name='USA Total' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="USA" columnWidth=0.7 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font color="#ffffff" fontWeight="600"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='USA_Gold' name='USA Gold' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="USA" columnWidth=0.5 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font fontWeight="600" color="#ffffff"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Total' name='UK Total' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="UK" columnWidth=0.7 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font color="#ffffff" fontWeight="600"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='UK_Gold' name='UK Gold' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="UK" columnWidth=0.5 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font fontWeight="600" color="#ffffff"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Total' name='China Total' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="China" columnWidth=0.7 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font color="#ffffff" fontWeight="600"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
        <e-series dataSource="ViewBag.dataSource" xName='Year' yName='China_Gold' name='China Gold' width=2
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column" groupName="China" columnWidth=0.5 columnSpacing=0.1>
            <e-series-marker>
                <e-series-datalabel visible="true" position="Top">
                    <e-font fontWeight="600" color="#ffffff"></e-font>
                </e-series-datalabel>
            </e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>
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
<ejs-chart id="container" title="Olympic Gold Medal Counts - RIO">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1"></e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Medal Count" minimum="0" maximum="80" interval="10">
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="country" yName="gold" tooltipMappingName="tooltipMappingName"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
    <e-chart-tooltipsettings enable="true" header="<b>${point.tooltip}</b>" format="Gold Medal: <b>${point.y}</b>">
    </e-chart-tooltipsettings>
</ejs-chart>
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 Color and Width of series border.

CSHTML
Column-series.cs
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" dashArray="5,5" fill="blue" opacity="0.5"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>
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;
        }