{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "@syncfusion/ej2-charts"
  ],
  "description": "Grouped Bar chart of global smartphone unit sales by brand from 2021-2023 via EJ2 Chart.",
  "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/javascript/llms.txt",
    "skillPack": "syncfusion/javascript-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/javascript/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/bar.html",
      "content": "<div class=\"control-section\">\n    <div id=\"container\" align=\"center\"></div>\n</div>\n\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n</style>"
    },
    {
      "target": "src/components/chart-bar/bar.ts",
      "content": "import { Chart, DataLabel, BarSeries, Category, Legend, Tooltip, type ILoadedEventArgs, Highlight } from '@syncfusion/ej2-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\nChart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip, Highlight);\n\n/**\n * Sample for bar series\n */\n(window as any).default = (): void => {\n    let chart: Chart = new Chart({\n\n        //Initializing Primary X and Y Axis\n        primaryXAxis: {\n            valueType: 'Category',\n            majorGridLines: { width: 0 },\n            majorTickLines: { width: 0 }\n        },\n        primaryYAxis:\n        {\n            labelFormat: '{value}M',\n            title: 'Units Sold (in Millions)',\n            maximum: 300,\n            edgeLabelPlacement: 'Shift',\n            majorTickLines: { width: 0 },\n            lineStyle: { width: 0 }\n        },\n        chartArea: {\n            border: {\n                width: 0\n            },\n            margin: {\n                bottom: 12\n            }\n        },\n        //Initializing Chart Series\n        series: [\n            {\n                type: 'Bar',\n                dataSource: [\n                    { year: '2021', count: 237 },\n                    { year: '2022', count: 226.4 },\n                    { year: '2023', count: 234.6 }\n\n                ],\n                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',\n                yName: 'count', name: 'Apple', columnSpacing: 0.3,\n            },\n            {\n                type: 'Bar',\n                dataSource: [\n                    { year: '2021', count: 190 },\n                    { year: '2022', count: 153.1 },\n                    { year: '2023', count: 145.9 }\n                ],\n                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',\n                yName: 'count', name: \"Xiaomi\", columnSpacing: 0.3,\n            },\n            {\n                type: 'Bar',\n                dataSource: [\n                    { year: '2021', count: 143 },\n                    { year: '2022', count: 103.3 },\n                    { year: '2023', count: 103.1 }\n                ],\n                xName: 'year', cornerRadius: { bottomRight: 4, topRight: 4 }, legendShape: 'Rectangle',\n                yName: 'count', name: \"Oppo\", columnSpacing: 0.3,\n            }\n        ],\n        // Initializing the tooltip\n        tooltip: {\n            enable: true,\n            enableHighlight: true,\n            header: '<b>${series.name}</b>',\n            format: '${point.x} : <b>${point.y}</b>'\n        },\n        width: Browser.isDevice ? '100%' : '75%',\n        legendSettings: { enableHighlight: true, shapeWidth: 9, shapeHeight: 9 },\n        //Initializing Chart title\n        title: 'Global Smartphone Sales Trends by Brand (2021-2023)',\n        subTitle: 'Source: wikipedia.org',\n        load: (args: ILoadedEventArgs) => {\n            loadChartTheme(args);\n        }\n    });\n    chart.appendTo('#container');\n};"
    }
  ]
}