{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "react",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "@syncfusion/ej2-react-charts"
  ],
  "description": "Bar chart comparing smartphone brand sales across years with legend, tooltip, and highlight.",
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/Chart.tsx",
      "content": "import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DataLabel, BarSeries, Category, Legend, Tooltip, Highlight, type ILoadedEventArgs } from '@syncfusion/ej2-react-charts';\nimport { Browser } from '@syncfusion/ej2-base';\n\nexport let appleData: Object[] = [\n    { year: '2021', count: 237 },\n    { year: '2022', count: 226.4 },\n    { year: '2023', count: 234.6 }\n];\n\nexport let xiaomiData: Object[] = [\n    { year: '2021', count: 190 },\n    { year: '2022', count: 153.1 },\n    { year: '2023', count: 145.9 }\n];\n\nexport let oppoData: Object[] = [\n    { year: '2021', count: 143 },\n    { year: '2022', count: 103.3 },\n    { year: '2023', count: 103.1 }\n];\n\nconst SAMPLE_CSS = `\n    .control-fluid {\n        padding: 0px !important;\n    }`;\n\nconst Bar = () => {\n\n    const onChartLoad = (args: ILoadedEventArgs): void => {\n        let chart: Element = document.getElementById('charts');\n        chart.setAttribute('title', '');\n    };\n\n    return (\n        <div className='control-pane'>\n            <style>{SAMPLE_CSS}</style>\n            <div className='control-section'>\n                <div>\n                    <ChartComponent id='charts' style={{ textAlign: \"center\" }} legendSettings={{ enableHighlight: true, shapeWidth: 9, shapeHeight: 9 }} primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 }, majorTickLines: { width: 0 } }} primaryYAxis={{ labelFormat: '{value}M', title: 'Units Sold (in Millions)', maximum: 300, edgeLabelPlacement: 'Shift', majorTickLines: { width: 0 }, lineStyle: { width: 0 } }} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} width={Browser.isDevice ? '100%' : '75%'} title='Global Smartphone Sales Trends by Brand (2021-2023)' subTitle='Source: wikipedia.org' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableHighlight: true, header: '<b>${series.name}</b>', format: '${point.x} : <b>${point.y}</b>' }}>\n                        <Inject services={[BarSeries, DataLabel, Category, Legend, Tooltip, Highlight]} />\n                        <SeriesCollectionDirective>\n                            <SeriesDirective dataSource={appleData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name=\"Apple\" cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />\n                            <SeriesDirective dataSource={xiaomiData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name='Xiaomi' cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />\n                            <SeriesDirective dataSource={oppoData} xName='year' yName='count' type='Bar' columnSpacing={0.3} name='Oppo' cornerRadius={{ bottomRight: 4, topRight: 4 }} legendShape='Rectangle' />\n                        </SeriesCollectionDirective>\n                    </ChartComponent>\n                </div>\n            </div>\n        </div>\n    )    \n}\nexport default Bar;"
    }
  ]
}