{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-bar",
  "framework": "vue",
  "type": "registry:component",
  "component": "Chart",
  "variant": "bar",
  "dependencies": [
    "@syncfusion/ej2-vue-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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/chart-bar.md"
  },
  "files": [
    {
      "target": "src/components/chart-bar/Chart.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div align='center'>\n        <ejs-chart style='display:block' align='center' id='chartcontainer' :title='title' :subTitle='subTitle' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'\n            :chartArea='chartArea' :width='width' :tooltip='tooltip' :legendSettings='legend'>\n            <e-series-collection>\n                <e-series :dataSource='seriesData1' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Apple' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>\n                <e-series :dataSource='seriesData2' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Xiaomi' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>\n                <e-series :dataSource='seriesData3' type='Bar' xName='year' columnSpacing=0.3 yName='count' name='Oppo' :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>\n            </e-series-collection>\n        </ejs-chart>\n    </div>\n\n</div>\n\n</template>\n<script>\nimport { Browser } from '@syncfusion/ej2-base';\nimport { ChartComponent, SeriesCollectionDirective, SeriesDirective, BarSeries, Category, Tooltip, Legend, DataLabel, Highlight} from \"@syncfusion/ej2-vue-charts\";\n\nexport default {\n  components: {\n    'ejs-chart': ChartComponent,\n    'e-series-collection': SeriesCollectionDirective,\n    'e-series': SeriesDirective\n  },\n  data: function() {\n    return {\n      seriesData1: [\n          { year: '2021', count: 237 },\n          { year: '2022', count: 226.4 },\n          { year: '2023', count: 234.6 }\n      ],\n      seriesData2: [\n          { year: '2021', count: 190 },\n          { year: '2022', count: 153.1 },\n          { year: '2023', count: 145.9 }\n      ],\n      seriesData3: [\n          { year: '2021', count: 143 },\n          { year: '2022', count: 103.3 },\n          { year: '2023', count: 103.1 }\n      ],\n      //Initializing Primary X Axis\n      primaryXAxis: {\n        valueType: 'Category',\n        majorGridLines: { width: 0 },\n        majorTickLines: { width: 0 }\n      },\n\n      //Initializing Primary Y Axis\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      cornerRadius: { bottomRight: 4, topRight: 4 },\n      width: Browser.isDevice ? '100%' : '75%',\n      tooltip: {\n        enable: true,\n        enableHighlight: true,\n        header: '<b>${series.name}</b>',\n        format: '${point.x} : <b>${point.y}</b>'\n      },\n      legend: { enableHighlight: true, shapeWidth: 9, shapeHeight: 9 },\n      title: 'Global Smartphone Sales Trends by Brand (2021-2023)',\n      subTitle: 'Source: wikipedia.org'\n    };\n  },\n  provide: {\n    chart: [BarSeries, Legend, Category, Tooltip, DataLabel, Highlight]\n  },\n};\n</script>\n"
    },
    {
      "target": "src/components/chart-bar/ChartView.vue",
      "content": "<template>\n  <Chart />\n</template>\n\n<script setup>\nimport Chart from '../../components/Chart.vue'\n</script>"
    }
  ]
}