{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "Syncfusion.Blazor.Charts"
  ],
  "description": "Bar chart compares global smartphone sales by brand with category axes, legends, tooltips, and data labels.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/Chart.razor",
      "content": "@page \"/chart/bar\"\n@using Syncfusion.Blazor.Charts\n\n<div class=\"control-section\" align='center'>\n    <SfChart Title=\"Global Smartphone Sales Trends by Brand (2021-2023)\" SubTitle=\"Source: wikipedia.org\" Width=\"@Width\">\n        <ChartTitleStyle TextOverflow=\"TextOverflow.Wrap\"></ChartTitleStyle>\n        <ChartSubTitleStyle TextOverflow=\"TextOverflow.Wrap\"></ChartSubTitleStyle>\n        <ChartArea><ChartAreaBorder Width=\"0\"></ChartAreaBorder></ChartArea>\n        <ChartMargin Bottom=\"12\"></ChartMargin>\n        <ChartPrimaryXAxis ValueType=\"Syncfusion.Blazor.Charts.ValueType.Category\">\n            <ChartAxisMajorGridLines Width=\"0\"></ChartAxisMajorGridLines>\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n        </ChartPrimaryXAxis>\n        <ChartPrimaryYAxis Title=\"Units Sold (in Millions)\" LabelFormat=\"{value}M\" EdgeLabelPlacement=\"EdgeLabelPlacement.Shift\" Maximum=\"300\">\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n            <ChartAxisLineStyle Width=\"0\"></ChartAxisLineStyle>\n        </ChartPrimaryYAxis>\n        <ChartTooltipSettings Enable=\"true\" EnableHighlight=\"true\" Header=\"<b>${series.name}</b>\" Format=\"${point.x} : <b>${point.y}</b>\"></ChartTooltipSettings>\n        <ChartLegendSettings Visible=\"true\" ShapeHeight=\"9\" ShapeWidth=\"9\" EnableHighlight=\"true\"></ChartLegendSettings>\n        <ChartSeriesCollection>\n            <ChartSeries DataSource=\"@AppleData\" XName=\"Year\" YName=\"Count\" Name=\"Apple\" Width=\"2\" ColumnSpacing=\"0.3\" Type=\"ChartSeriesType.Bar\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartCornerRadius BottomRight=\"4\" TopRight=\"4\" />\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"false\" Position=\"LabelPosition.Top\">\n                        <ChartDataLabelFont FontWeight=\"600\" Color=\"#ffffff\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>\n            <ChartSeries DataSource=\"@XiaomiData\" XName=\"Year\" YName=\"Count\" Name=\"Xiaomi\" Width=\"2\" ColumnSpacing=\"0.3\" Type=\"ChartSeriesType.Bar\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartCornerRadius BottomRight=\"4\" TopRight=\"4\" />\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"false\" Position=\"LabelPosition.Top\">\n                        <ChartDataLabelFont FontWeight=\"600\" Color=\"#ffffff\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>\n            <ChartSeries DataSource=\"@OppoData\" XName=\"Year\" YName=\"Count\" Name=\"Oppo\" Width=\"2\" ColumnSpacing=\"0.3\" Type=\"ChartSeriesType.Bar\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartCornerRadius BottomRight=\"4\" TopRight=\"4\" />\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"false\" Position=\"LabelPosition.Top\">\n                        <ChartDataLabelFont FontWeight=\"600\" Color=\"#ffffff\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>\n        </ChartSeriesCollection>\n    </SfChart>\n</div>\n@code{\n    public string Width { get; set; } = \"90%\";\n    public List<SalesData> AppleData = new List<SalesData>\n    {\n        new SalesData { Year = \"2021\", Count = 237 },\n        new SalesData { Year = \"2022\", Count = 226.4 },\n        new SalesData { Year = \"2023\", Count = 234.6 }\n    };\n    public List<SalesData> XiaomiData = new List<SalesData>\n    {\n        new SalesData { Year = \"2021\", Count = 190 },\n        new SalesData { Year = \"2022\", Count = 153.1 },\n        new SalesData { Year = \"2023\", Count = 145.9 }\n    };\n    public List<SalesData> OppoData = new List<SalesData>\n    {\n        new SalesData { Year = \"2021\", Count = 143 },\n        new SalesData { Year = \"2022\", Count = 103.3 },\n        new SalesData { Year = \"2023\", Count = 103.1 }\n    };\n    public class SalesData\n    {\n        public string? Year { get; set; }\n        public double Count { get; set; }\n    }\n}"
    }
  ]
}