# chart-bar

> Grouped Bar chart of global smartphone unit sales by brand from 2021-2023 configured via EJ2 ChartSeriesType.Bar.

**Framework:** aspnet-mvc  **Component:** Chart  **Variant:** bar

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-mvc/chart-bar.json
```

**Install Package(s)**

```bash
Install-Package Syncfusion.AspNetMvc.Charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-bar/Bar.cshtml

```cshtml
@using Syncfusion.EJ2;
@section ControlsSection{
    <div class="control-section" align="center">
        
            @Html.EJS().Chart("container").Series(
            series => {
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Apple").XName("Year").YName("Count1")
                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData["ChartPoints"]).ColumnSpacing(0.3).Add();
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Xiaomi").XName("Year").YName("Count2")
                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData["ChartPoints"]).ColumnSpacing(0.3).Add();
                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name("Oppo").XName("Year").YName("Count3")
                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData["ChartPoints"]).ColumnSpacing(0.3).Add();
            }).PrimaryXAxis(
            px => 
                px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0)).
                    MajorTickLines(mt=>mt.Width(0))
            ).PrimaryYAxis(
            py => 
                py.LabelFormat("{value}M").Title("Units Sold (in Millions)").Maximum(300).
                EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LineStyle(ls=>ls.Width(0)).MajorTickLines(mt=>mt.Width(0))
            ).Tooltip(
            tooltip => 
                tooltip.Enable(true).EnableHighlight(true).Header("<b>${series.name}</b>").Format("${point.x} : <b>${point.y}</b>")
            ).ChartArea(area => area.Border(br => br.Width(0)).Margin(margin => margin.Bottom(12))).Title("Global Smartphone Sales Trends by Brand (2021-2023)").SubTitle("Source: wikipedia.org").LegendSettings(leg => leg.Visible(true).EnableHighlight(true).ShapeHeight(9).ShapeWidth(9)).Load("load").Render()       
        
        </div>
    
@*custom code start*@
    <style>
        #control-container {
            padding: 0px !important;
        }
    </style>
@*custom code end*@
    <script src="~/Scripts/chart/theme-color.js"></script>
    <script>
        var load = function (args) {
            loadChartTheme(args);
            args.chart.width = ej.base.Browser.isDevice ? "100%" : "75%";
        }
    </script>
}

```

### src/components/chart-bar/BarController.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Charts;

namespace EJ2MVCSampleBrowser.Controllers.Chart
{
    public partial class ChartController : Controller
    {
        // GET: Bar
        public ActionResult Bar()
        {
            List<BarChartData> ChartPoints = new List<BarChartData>
            {
                new BarChartData { Year = "2021",  Count1 = 237, Count2 = 190, Count3 = 143 },
                new BarChartData { Year = "2022",  Count1 = 226.4, Count2 = 153.1, Count3 = 103.3 },
                new BarChartData { Year = "2023",  Count1 = 234.6, Count2 = 145.9, Count3 = 103.1 },
            };
            ViewData["ChartPoints"] = ChartPoints;
            return View();
        }
        public class BarChartData
        {
            public string Year;
            public double Count1;
            public double Count2;
            public double Count3;
        }
    }
}
```