# chart-bar

> Bar chart compares global smartphone sales by brand with category axes, legends, tooltips, and data labels.

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

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.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.razor

```razor
@page "/chart/bar"
@using Syncfusion.Blazor.Charts

<div class="control-section" align='center'>
    <SfChart Title="Global Smartphone Sales Trends by Brand (2021-2023)" SubTitle="Source: wikipedia.org" Width="@Width">
        <ChartTitleStyle TextOverflow="TextOverflow.Wrap"></ChartTitleStyle>
        <ChartSubTitleStyle TextOverflow="TextOverflow.Wrap"></ChartSubTitleStyle>
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartMargin Bottom="12"></ChartMargin>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Units Sold (in Millions)" LabelFormat="{value}M" EdgeLabelPlacement="EdgeLabelPlacement.Shift" Maximum="300">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" EnableHighlight="true" Header="<b>${series.name}</b>" Format="${point.x} : <b>${point.y}</b>"></ChartTooltipSettings>
        <ChartLegendSettings Visible="true" ShapeHeight="9" ShapeWidth="9" EnableHighlight="true"></ChartLegendSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@AppleData" XName="Year" YName="Count" Name="Apple" Width="2" ColumnSpacing="0.3" Type="ChartSeriesType.Bar" LegendShape="LegendShape.Rectangle">
                <ChartCornerRadius BottomRight="4" TopRight="4" />
                <ChartMarker>
                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@XiaomiData" XName="Year" YName="Count" Name="Xiaomi" Width="2" ColumnSpacing="0.3" Type="ChartSeriesType.Bar" LegendShape="LegendShape.Rectangle">
                <ChartCornerRadius BottomRight="4" TopRight="4" />
                <ChartMarker>
                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@OppoData" XName="Year" YName="Count" Name="Oppo" Width="2" ColumnSpacing="0.3" Type="ChartSeriesType.Bar" LegendShape="LegendShape.Rectangle">
                <ChartCornerRadius BottomRight="4" TopRight="4" />
                <ChartMarker>
                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>
@code{
    public string Width { get; set; } = "90%";
    public List<SalesData> AppleData = new List<SalesData>
    {
        new SalesData { Year = "2021", Count = 237 },
        new SalesData { Year = "2022", Count = 226.4 },
        new SalesData { Year = "2023", Count = 234.6 }
    };
    public List<SalesData> XiaomiData = new List<SalesData>
    {
        new SalesData { Year = "2021", Count = 190 },
        new SalesData { Year = "2022", Count = 153.1 },
        new SalesData { Year = "2023", Count = 145.9 }
    };
    public List<SalesData> OppoData = new List<SalesData>
    {
        new SalesData { Year = "2021", Count = 143 },
        new SalesData { Year = "2022", Count = 103.3 },
        new SalesData { Year = "2023", Count = 103.1 }
    };
    public class SalesData
    {
        public string? Year { get; set; }
        public double Count { get; set; }
    }
}
```