{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "aspnet-core",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "Syncfusion.AspNetCore.Charts"
  ],
  "description": "Bar chart compares smartphone brand sales across years with a vertical series.",
  "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/aspnet-core/llms.txt",
    "skillPack": "syncfusion/aspnetcore-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-core/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/chart.cshtml",
      "content": "@page\r\n@model EJ2CoreSampleBrowser.Pages.Chart.BarModel\r\n@using Syncfusion.EJ2\r\n\r\n    <div class=\"control-section\" align=\"center\">\r\n\r\n        <ejs-chart id=\"lineContainer\" title=\"Global Smartphone Sales Trends by Brand (2021-2023)\" subTitle=\"Source: wikipedia.org\">\r\n            <e-chart-chartarea>\r\n                <e-chartarea-border width=\"0\"></e-chartarea-border>\r\n                <e-chartarea-margin bottom=12></e-chartarea-margin>\r\n            </e-chart-chartarea>\r\n            <e-chart-tooltipsettings enable=\"true\" enableHighlight=true header=\"<b>${series.name}</b>\" format=\"${point.x} : <b>${point.y}</b>\">\r\n            </e-chart-tooltipsettings>\r\n            <e-chart-legendsettings visible=\"true\" enableHighlight=\"true\" shapeWidth=9 shapeHeight=9>\r\n            </e-chart-legendsettings>\r\n            <e-chart-primaryxaxis valueType=\"@Syncfusion.EJ2.Charts.ValueType.Category\">\r\n                <e-majorgridlines width=\"0\"></e-majorgridlines>\r\n                <e-majorticklines width=\"0\"></e-majorticklines>\r\n            </e-chart-primaryxaxis>\r\n            <e-chart-primaryyaxis labelFormat=\"{value}M\"\r\n                                  title=\"Units Sold (in Millions)\" maximum=300\r\n                                  edgeLabelPlacement=\"@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift\">\r\n                <e-majorticklines width=\"0\"></e-majorticklines>\r\n                <e-linestyle width=\"0\"></e-linestyle>\r\n            </e-chart-primaryyaxis>\r\n            <e-series-collection>\r\n                <e-series dataSource=\"@Model.ChartPoints\" xName=\"Year\" yName=\"Count1\" name=\"Apple\" columnSpacing=\"0.3\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Bar\" legendShape=Rectangle>\r\n                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartPoints\" xName=\"Year\" yName=\"Count2\" name=\"Xiaomi\" columnSpacing=\"0.3\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Bar\" legendShape=Rectangle>\r\n                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>\r\n                </e-series>\r\n                <e-series dataSource=\"@Model.ChartPoints\" xName=\"Year\" yName=\"Count3\" name=\"Oppo\" columnSpacing=\"0.3\" type=\"@Syncfusion.EJ2.Charts.ChartSeriesType.Bar\" legendShape=Rectangle>\r\n                    <e-series-cornerradius bottomRight=4 topRight=4></e-series-cornerradius>\r\n                </e-series>\r\n            </e-series-collection>\r\n        </ejs-chart>\r\n    </div>"
    },
    {
      "target": "src/components/chart-bar/chart.cshtml.cs",
      "content": "using Microsoft.AspNetCore.Mvc;\r\nusing Microsoft.AspNetCore.Mvc.RazorPages;\r\n\r\nnamespace EJ2CoreSampleBrowser.Pages.Chart\r\n{\r\n    public class BarModel : PageModel\r\n    {\r\n        public List<BarChartData> ChartPoints { get; set; }\r\n        public void OnGet()\r\n        {\r\n            ChartPoints = new List<BarChartData>\r\n            {\r\n                new BarChartData { Year = \"2021\",  Count1 = 237, Count2 = 190, Count3 = 143 },\r\n                new BarChartData { Year = \"2022\",  Count1 = 226.4, Count2 = 153.1, Count3 = 103.3 },\r\n                new BarChartData { Year = \"2023\",  Count1 = 234.6, Count2 = 145.9, Count3 = 103.1 },\r\n            };\r\n        }\r\n    }\r\n    public class BarChartData\r\n    {\r\n        public string Year;\r\n        public double Count1;\r\n        public double Count2;\r\n        public double Count3;\r\n    }\r\n}"
    }
  ]
}