{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-column",
  "framework": "vue",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-column",
  "dependencies": [
    "@syncfusion/ej2-vue-charts"
  ],
  "description": "Stacked column chart compares global cotton production by country across years.",
  "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-stacked-column.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-column/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' :stackLabels='stackLabels' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'\n            :chartArea='chartArea' :width='width' :tooltip='tooltip' :legendClick='legendClick' :legendSettings='legend' >\n            <e-series-collection>\n                <e-series :dataSource='seriesData1' type='StackingColumn' xName='x' yName='y' name='India' columnWidth=0.4 :border='border' :marker=\"marker\" legendShape='Rectangle'> </e-series>\n                <e-series :dataSource='seriesData2' type='StackingColumn' xName='x' yName='y' name='China' columnWidth=0.4 :border='border' :marker=\"marker\" legendShape='Rectangle'> </e-series>\n                <e-series :dataSource='seriesData3' type='StackingColumn' xName='x' yName='y' name='United States' columnWidth=0.4 :border='border' :marker=\"marker\" :cornerRadius='cornerRadius' legendShape='Rectangle'> </e-series>\n            </e-series-collection>\n        </ejs-chart>\n    </div>\n</div>\n\n</template>\n<script>\nimport { Browser } from '@syncfusion/ej2-base';\nimport { ChartComponent, SeriesDirective, SeriesCollectionDirective, StackingColumnSeries, Legend, Category, Tooltip, Highlight, legendClick, DataLabel} 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: Browser.isDevice ?\n    [\n        { x: '2021', y: 24.3 },\n        { x: '2022', y: 26.3 },\n        { x: '2023', y: 25.4 },\n        { x: '2024', y: 25 }\n    ] :\n    [\n        { x: '2019', y: 28.5 },\n        { x: '2020', y: 27.5 },\n        { x: '2021', y: 24.3 },\n        { x: '2022', y: 26.3 },\n        { x: '2023', y: 25.4 },\n        { x: '2024', y: 25 }\n    ],\n\n    seriesData2: Browser.isDevice ?\n    [\n        { x: '2021', y: 26.7 },\n        { x: '2022', y: 30.8 },\n        { x: '2023', y: 27.4 },\n        { x: '2024', y: 31 }\n    ] :\n    [\n        { x: '2019', y: 26.9 },\n        { x: '2020', y: 29.3 },\n        { x: '2021', y: 26.7 },\n        { x: '2022', y: 30.8 },\n        { x: '2023', y: 27.4 },\n        { x: '2024', y: 31 }\n    ],\n\n    seriesData3: Browser.isDevice ?\n    [\n        { x: '2021', y: 17.5 },\n        { x: '2022', y: 14.5 },\n        { x: '2023', y: 12.1 },\n        { x: '2024', y: 14.4 }\n    ] :\n    [\n        { x: '2019', y: 19.9 },\n        { x: '2020', y: 14.6 },\n        { x: '2021', y: 17.5 },\n        { x: '2022', y: 14.5 },\n        { x: '2023', y: 12.1 },\n        { x: '2024', y: 14.4 }\n    ],\n\n      //Initializing Primary X Axis\n          primaryXAxis: {\n            majorGridLines: { width: 0 },\n            minorGridLines: { width: 0 },\n            majorTickLines: { width: 0 },\n            minorTickLines: { width: 0 },\n            interval: 1,\n            lineStyle: { width: 0 },\n            labelIntersectAction: 'Rotate45',\n            valueType: 'Category'\n        },\n\n      //Initializing Primary Y Axis\n         primaryYAxis:\n        {\n            title: 'Production (60KG Bags)',\n            lineStyle: { width: 0 },\n            majorTickLines: { width: 0 },\n            majorGridLines: { width: 1 },\n            minorGridLines: { width: 1 },\n            minorTickLines: { width: 0 },\n            labelFormat: '{value}M', interval: 20 \n        },\n        chartArea: {\n            border: {\n                width: 0\n            },\n            margin: { bottom: 12 }\n        },\n\n      tooltip: {\n            enable: true, enableHighlight: true, header: '<b>${point.x}</b>', format: '${series.name} : <b>${point.y}</b>' \n        },\n        marker: { visible: false, dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' }}},\n        cornerRadius: {topLeft: 4, topRight: 4},\n        legend: { enableHighlight : true, shapeWidth: 9, shapeHeight: 9 },\n        border: {color: '#ffffff', width:1},\n        width : Browser.isDevice ? '100%' : '75%',\n      title: \"Global Cotton Production by Country (2019–2024)\",\n      subTitle: \"Source: fas.usda.gov\",\n      stackLabels: { visible: true, format: '{value}M', font: { size: Browser.isDevice ? '10px' : '12px' } }\n    };\n  },\n  provide: {\n    chart: [StackingColumnSeries, Legend, Category, Tooltip, Highlight, DataLabel]\n  },\n  methods: {\n    legendClick: function(args){\n      if (args.series.index === 0) {\n        if (args.chart.series[2].visible) {\n          args.chart.series[2].cornerRadius.topLeft = 4;\n          args.chart.series[2].cornerRadius.topRight = 4;\n          args.chart.series[0].cornerRadius.topLeft = 0;\n          args.chart.series[0].cornerRadius.topRight = 0;\n        } else if (args.chart.series[1].visible) {\n          args.chart.series[1].cornerRadius.topLeft = 4;\n          args.chart.series[1].cornerRadius.topRight = 4;\n          args.chart.series[0].cornerRadius.topLeft = 0;\n          args.chart.series[0].cornerRadius.topRight = 0;\n        } else {\n          args.chart.series[0].cornerRadius.topLeft = 4;\n          args.chart.series[0].cornerRadius.topRight = 4;\n        }\n      }\n      if (args.series.index === 1) {\n        if (args.chart.series[2].visible) {\n          args.chart.series[2].cornerRadius.topLeft = 4;\n          args.chart.series[2].cornerRadius.topRight = 4;\n          args.chart.series[1].cornerRadius.topLeft = 0;\n          args.chart.series[1].cornerRadius.topRight = 0;\n        } else if (args.series.visible && args.chart.series[0].visible) {\n          args.chart.series[0].cornerRadius.topLeft = 4;\n          args.chart.series[0].cornerRadius.topRight = 4;\n          args.chart.series[1].cornerRadius.topLeft = 0;\n          args.chart.series[1].cornerRadius.topRight = 0;\n        } else {\n          args.chart.series[1].cornerRadius.topLeft = 4;\n          args.chart.series[1].cornerRadius.topRight = 4;\n          args.chart.series[0].cornerRadius.topLeft = 0;\n          args.chart.series[0].cornerRadius.topRight = 0;\n        }\n      }\n\n      if (args.series.index === 2) {\n        if (!args.series.visible) {\n          args.chart.series[2].cornerRadius.topLeft = 4;\n          args.chart.series[2].cornerRadius.topRight = 4;\n          args.chart.series[1].cornerRadius.topLeft = 0;\n          args.chart.series[1].cornerRadius.topRight = 0;\n          args.chart.series[0].cornerRadius.topLeft = 0;\n          args.chart.series[0].cornerRadius.topRight = 0;\n        } else if (args.chart.series[1].visible) {\n          args.chart.series[1].cornerRadius.topLeft = 4;\n          args.chart.series[1].cornerRadius.topRight = 4;\n          args.chart.series[2].cornerRadius.topLeft = 0;\n          args.chart.series[2].cornerRadius.topRight = 0;\n        } else if (args.series.visible && args.chart.series[0].visible) {\n          args.chart.series[0].cornerRadius.topLeft = 4;\n          args.chart.series[0].cornerRadius.topRight = 4;\n          args.chart.series[2].cornerRadius.topLeft = 0;\n          args.chart.series[2].cornerRadius.topRight = 0;\n        }\n      }\n    },\n    OnChartAxisLabelRender : function(args){\n      if(args.value > 999999 || args.value < -999999) {\n      args.text = args.text.replace(\"0000000\",\"0M\").replace(\"000000\", \"M\");\n      }\n  },\n    }\n};\n</script>\n"
    },
    {
      "target": "src/components/chart-stacked-column/ChartView.vue",
      "content": "<template>\n  <Chart />\n</template>\n\n<script setup>\nimport Chart from '../../components/Chart.vue'\n</script>"
    }
  ]
}