{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "aspnet-mvc",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "Syncfusion.AspNetMvc.Charts"
  ],
  "description": "Grouped Bar chart of global smartphone unit sales by brand from 2021-2023 configured via EJ2 ChartSeriesType.Bar.",
  "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/aspnetmvc/llms.txt",
    "skillPack": "syncfusion/aspnetmvc-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/aspnet-mvc/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/Bar.cshtml",
      "content": "@using Syncfusion.EJ2;\n@section ControlsSection{\n    <div class=\"control-section\" align=\"center\">\n        \n            @Html.EJS().Chart(\"container\").Series(\n            series => {\n                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name(\"Apple\").XName(\"Year\").YName(\"Count1\")\n                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData[\"ChartPoints\"]).ColumnSpacing(0.3).Add();\n                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name(\"Xiaomi\").XName(\"Year\").YName(\"Count2\")\n                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData[\"ChartPoints\"]).ColumnSpacing(0.3).Add();\n                series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar).Name(\"Oppo\").XName(\"Year\").YName(\"Count3\")\n                    .CornerRadius(cr => cr.TopRight(4).BottomRight(4)).LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).DataSource(ViewData[\"ChartPoints\"]).ColumnSpacing(0.3).Add();\n            }).PrimaryXAxis(\n            px => \n                px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0)).\n                    MajorTickLines(mt=>mt.Width(0))\n            ).PrimaryYAxis(\n            py => \n                py.LabelFormat(\"{value}M\").Title(\"Units Sold (in Millions)\").Maximum(300).\n                EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).LineStyle(ls=>ls.Width(0)).MajorTickLines(mt=>mt.Width(0))\n            ).Tooltip(\n            tooltip => \n                tooltip.Enable(true).EnableHighlight(true).Header(\"<b>${series.name}</b>\").Format(\"${point.x} : <b>${point.y}</b>\")\n            ).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()       \n        \n        </div>\n    \n@*custom code start*@\n    <style>\n        #control-container {\n            padding: 0px !important;\n        }\n    </style>\n@*custom code end*@\n    <script src=\"~/Scripts/chart/theme-color.js\"></script>\n    <script>\n        var load = function (args) {\n            loadChartTheme(args);\n            args.chart.width = ej.base.Browser.isDevice ? \"100%\" : \"75%\";\n        }\n    </script>\n}\n"
    },
    {
      "target": "src/components/chart-bar/BarController.cs",
      "content": "using System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Web;\nusing System.Web.Mvc;\nusing Syncfusion.EJ2.Charts;\n\nnamespace EJ2MVCSampleBrowser.Controllers.Chart\n{\n    public partial class ChartController : Controller\n    {\n        // GET: Bar\n        public ActionResult Bar()\n        {\n            List<BarChartData> ChartPoints = new List<BarChartData>\n            {\n                new BarChartData { Year = \"2021\",  Count1 = 237, Count2 = 190, Count3 = 143 },\n                new BarChartData { Year = \"2022\",  Count1 = 226.4, Count2 = 153.1, Count3 = 103.3 },\n                new BarChartData { Year = \"2023\",  Count1 = 234.6, Count2 = 145.9, Count3 = 103.1 },\n            };\n            ViewData[\"ChartPoints\"] = ChartPoints;\n            return View();\n        }\n        public class BarChartData\n        {\n            public string Year;\n            public double Count1;\n            public double Count2;\n            public double Count3;\n        }\n    }\n}"
    }
  ]
}