{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-column",
  "framework": "javascript",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-column",
  "dependencies": [
    "@syncfusion/ej2-charts"
  ],
  "description": "Stacked Column chart of country-level cotton production from 2019-2024 with legend-driven colors.",
  "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-stacked-column.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-column/stacked-column.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-stacked-column/stacked-column.ts",
      "content": "import { Chart, StackingColumnSeries, Category, Legend, Tooltip, DataLabel, type ILoadedEventArgs, type ILegendClickEventArgs, Highlight } from '@syncfusion/ej2-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\nChart.Inject(StackingColumnSeries, Category, Legend, Tooltip, Highlight, DataLabel);\n\n/**\n * Sample for StackedColumn Series\n */\n\n(window as any).default = (): void => {\n    let chart: Chart = new Chart({\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        //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',\n            interval: 20\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: 'StackingColumn',\n                dataSource: 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                xName: 'x', marker: { dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }, legendShape: 'Rectangle',\n                yName: 'y', name: 'India', columnWidth: 0.4, border: { width: 1, color: \"white\" }\n            },\n            {\n                type: 'StackingColumn',\n                dataSource: 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                xName: 'x', marker: { dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }, legendShape: 'Rectangle',\n                yName: 'y', name: 'China', columnWidth: 0.4, border: { width: 1, color: \"white\" }\n            },\n            {\n                type: 'StackingColumn',\n                dataSource: 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                xName: 'x', marker: { dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }, legendShape: 'Rectangle',\n                yName: 'y', name: 'United States', columnWidth: 0.4, border: { width: 1, color: \"white\" }, cornerRadius: { topLeft: 4, topRight: 4 }\n            }\n        ],\n\n        //Initializing Chart title\n        title: 'Global Cotton Production by Country (2019–2024)',\n        subTitle: 'Source: fas.usda.gov',\n        //Initializing User Interaction Tooltip\n        tooltip: {\n            enable: true,\n            enableHighlight: true,\n            header: '<b>${point.x}</b>',\n            format: '${series.name} : <b>${point.y}</b>'\n        },\n        width: Browser.isDevice ? '100%' : '75%',\n        legendSettings: {\n            enableHighlight: true,\n            shapeWidth: 9,\n            shapeHeight: 9\n        },\n        stackLabels: {\n            visible: true,\n            format: '{value}M',\n            font: {\n                size: Browser.isDevice ? '10px' : '12px'\n            }\n        },\n        load: (args: ILoadedEventArgs) => {\n            loadChartTheme(args);\n        },\n        legendClick: (args: ILegendClickEventArgs) => {\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    });\n    chart.appendTo('#container');\n};"
    }
  ]
}