# chart-bar

> Bar chart compares smartphone brand sales across years with a vertical series.

**Framework:** aspnet-core  **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-core/chart-bar.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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/chart.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Pages.Chart.BarModel
@using Syncfusion.EJ2

    <div class="control-section" align="center">

        <ejs-chart id="lineContainer" title="Global Smartphone Sales Trends by Brand (2021-2023)" subTitle="Source: wikipedia.org">
            <e-chart-chartarea>
                <e-chartarea-border width="0"></e-chartarea-border>
                <e-chartarea-margin bottom=12></e-chartarea-margin>
            </e-chart-chartarea>
            <e-chart-tooltipsettings enable="true" enableHighlight=true header="<b>${series.name}</b>" format="${point.x} : <b>${point.y}</b>">
            </e-chart-tooltipsettings>
            <e-chart-legendsettings visible="true" enableHighlight="true" shapeWidth=9 shapeHeight=9>
            </e-chart-legendsettings>
            <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category">
                <e-majorgridlines width="0"></e-majorgridlines>
                <e-majorticklines width="0"></e-majorticklines>
            </e-chart-primaryxaxis>
            <e-chart-primaryyaxis labelFormat="{value}M"
                                  title="Units Sold (in Millions)" maximum=300
                                  edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
                <e-majorticklines width="0"></e-majorticklines>
                <e-linestyle width="0"></e-linestyle>
            </e-chart-primaryyaxis>
            <e-series-collection>
                <e-series dataSource="@Model.ChartPoints" xName="Year" yName="Count1" name="Apple" columnSpacing="0.3" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar" legendShape=Rectangle>
                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>
                </e-series>
                <e-series dataSource="@Model.ChartPoints" xName="Year" yName="Count2" name="Xiaomi" columnSpacing="0.3" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar" legendShape=Rectangle>
                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>
                </e-series>
                <e-series dataSource="@Model.ChartPoints" xName="Year" yName="Count3" name="Oppo" columnSpacing="0.3" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Bar" legendShape=Rectangle>
                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
```

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

```cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Pages.Chart
{
    public class BarModel : PageModel
    {
        public List<BarChartData> ChartPoints { get; set; }
        public void OnGet()
        {
            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 },
            };
        }
    }
    public class BarChartData
    {
        public string Year;
        public double Count1;
        public double Count2;
        public double Count3;
    }
}
```