Bar Charts in ASP.NET CORE Charts Component

4 Oct 202319 minutes to read

Bar

To render a bar series, use series Type as Bar.

CSHTML
Bar.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="yValue" name="India"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue1" name="China"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46, yValue1=56 },
                new ChartData { x= "GBR", yValue= 27, yValue1=17 },
                new ChartData { x= "CHN", yValue= 26, yValue1=36 },
                new ChartData { x= "UK", yValue= 56,  yValue1=16 },
                new ChartData { x= "AUS", yValue= 12, yValue1=46 },
                new ChartData { x= "IND", yValue= 26, yValue1=16 },
                new ChartData { x= "DEN", yValue= 26, yValue1=12 },
                new ChartData { x= "MEX", yValue= 34, yValue1=32},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
            public double yValue1;
        }

Bar space and width

The ColumnSpacing and ColumnWidth properties are used to customize the space between bars.

CSHTML
Bar-space.cs
<ejs-chart id="container" title="Olympic Medals">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" columnWidth="0.7" columnSpacing="0.2"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46 },
                new ChartData { x= "GBR", yValue= 27 },
                new ChartData { x= "CHN", yValue= 26 },
                new ChartData { x= "UK",  yValue= 56 },
                new ChartData { x= "AUS", yValue= 12 },
                new ChartData { x= "IND", yValue= 26 },
                new ChartData { x= "DEN", yValue= 26 },
                new ChartData { x= "MEX", yValue= 34 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
        }

Grouped bar

You can use the GroupName property to group the data points in the bar type charts. Data points with same group name are grouped together.

CSHTML
Group-bar.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.Bar" 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.Bar" 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.Bar" 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.Bar" 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.Bar" 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.Bar" 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 bar chart

To render a cylindrical bar chart, set the ColumnFacet property to Cylinder in the chart series.

CSHTML
Bar-cylinder.cs
<ejs-chart id="container" title="Unemployment rate in percentage">
    <e-chart-primaryxaxis minimum="2005" maximum="2012" interval="1"></e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Percentage" minimum="3" maximum="12" interval="1">
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="India"
            columnFacet="@Syncfusion.EJ2.Charts.ShapeType.Cylinder"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar"></e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
{
    List<CylinderChartData> chartData = new List<CylinderChartData>
    {
        new CylinderChartData { x= 2006, y= 9 },
        new CylinderChartData { x= 2007, y= 7.8 },
        new CylinderChartData { x= 2008, y= 10.5 },
        new CylinderChartData { x= 2009, y= 8.4 },
        new CylinderChartData { x= 2010, y= 6 },
        new CylinderChartData { x= 2011, y= 11 }               
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class CylinderChartData
{
    public double x;
    public double y;
}

Series customization

The following properties can be used to customize the Bar 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
Bar-series.cs
<ejs-chart id="container" title="Olympic Medals">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="yValue" opacity="0.5" dashArray="5,5" fill="blue"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar">
            <e-series-border width="2" color="black"></e-series-border>
        </e-series>
    </e-series-collection>
</ejs-chart>
public ActionResult Index()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { x= "USA", yValue= 46 },
                new ChartData { x= "GBR", yValue= 27 },
                new ChartData { x= "CHN", yValue= 26 },
                new ChartData { x= "UK",  yValue= 56 },
                new ChartData { x= "AUS", yValue= 12 },
                new ChartData { x= "IND", yValue= 26 },
                new ChartData { x= "DEN", yValue= 26 },
                new ChartData { x= "MEX", yValue= 34 }
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ChartData
        {
            public string x;
            public double yValue;
        }

Bar Charts in ASP.NET CORE Charts Component

Bar

Bar space and width

Grouped bar

Cylindrical bar chart

Series customization

See also