{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "angular",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "@syncfusion/ej2-angular-charts"
  ],
  "description": "Grouped Bar chart of global smartphone unit sales by brand from 2021-2023 via ChartAllModule.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/bar.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { ILoadedEventArgs, ChartAllModule } from '@syncfusion/ej2-angular-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\n/**\n * Sample for Bar Series\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'bar.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [ ChartAllModule]\n})\nexport class BarChartComponent {\n    public chartArea: Object = {\n        border: {\n            width: 0\n        },\n        margin: {\n            bottom: 12\n        }\n    };\n    //Initializing Chart Width\n    public width: string = Browser.isDevice ? '100%' : '75%';\n    public data: Object[] = [\n        { year: '2021', count: 237 },\n        { year: '2022', count: 226.4 },\n        { year: '2023', count: 234.6 }\n    ];\n    public data1: Object[] = [\n        { year: '2021', count: 190 },\n        { year: '2022', count: 153.1 },\n        { year: '2023', count: 145.9 }\n    ];\n    public data2: Object[] = [\n        { year: '2021', count: 143 },\n        { year: '2022', count: 103.3 },\n        { year: '2023', count: 103.1 }\n    ];\n    //Initializing Marker\n    public cornerRadius: Object = { bottomRight: 4, topRight: 4 };\n    //Initializing Primary X Axis\n    public primaryXAxis: Object = {\n        valueType: 'Category',\n        majorGridLines: { width: 0 },\n        majorTickLines: { width: 0 }\n    };\n    //Initializing Primary Y Axis\n    public primaryYAxis: Object = {\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    public tooltip: Object = {\n        enable: true,\n        enableHighlight: true,\n        header: '<b>${series.name}</b>',\n        format: '${point.x} : <b>${point.y}</b>'\n    };\n    public legend: Object = {\n        enableHighlight: true, shapeWidth: 9, shapeHeight: 9\n    }\n    // custom code start\n    public load(args: ILoadedEventArgs): void {\n        loadChartTheme(args);\n    };\n    // custom code end\n    public title: string = 'Global Smartphone Sales Trends by Brand (2021-2023)';\n    public subTitle: string = 'Source: wikipedia.org';\n    constructor() {\n        //code\n    };\n\n}"
    },
    {
      "target": "src/components/chart-bar/bar.html",
      "content": "\n<div class=\"control-section\">\n    <div align='center'>\n        <ejs-chart style='display:block;' [chartArea]='chartArea' [width]='width' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis'\n            [primaryYAxis]='primaryYAxis' [title]='title' [subTitle]='subTitle' [tooltip]='tooltip' (load)='load($event)' [legendSettings]='legend'>\n            <e-series-collection>\n                <e-series [dataSource]='data' type='Bar' xName='year' yName='count' name='Apple' columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>\n                <e-series [dataSource]='data1' type='Bar' xName='year' yName='count' name=\"Xiaomi\" columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>\n                <e-series [dataSource]='data2' type='Bar' xName='year' yName='count' name=\"Oppo\" columnSpacing=0.3 legendShape='Rectangle' [cornerRadius]='cornerRadius'> </e-series>\n            </e-series-collection>\n        </ejs-chart>\n    </div>\n</div>\n"
    }
  ]
}