{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-column",
  "framework": "react",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-column",
  "dependencies": [
    "@syncfusion/ej2-react-charts"
  ],
  "description": "Stacked columns compare global cotton production by country across recent 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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/chart-stacked-column.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-column/Chart.tsx",
      "content": "import * as React from \"react\";\nimport {  useRef } from 'react';\nimport { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, StackingColumnSeries, Tooltip, Highlight, DataLabel, type ILoadedEventArgs, type ILegendClickEventArgs } from '@syncfusion/ej2-react-charts';\nimport { Browser } from '@syncfusion/ej2-base';\n\nexport let data1: Object[] = 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    ];\nexport let data2: Object[] = 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    ];\nexport let data3: Object[] = 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\nconst SAMPLE_CSS = `\n    .control-fluid {\n        padding: 0px !important;\n    }`;\nconst StackedColumn = () => {\n    let chartInstance: React.RefObject<ChartComponent> = useRef<ChartComponent>(null);\n\n    const onChartLoad = (args: ILoadedEventArgs): void => {\n        let chart: Element = document.getElementById('charts');\n        chart.setAttribute('title', '');\n    };\n\n    const onLegendClick = (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    return (\n        <div className='control-pane'>\n            <style>{SAMPLE_CSS}</style>\n            <div className='control-section'>\n                <ChartComponent id='charts' ref={chartInstance} style={{ textAlign: \"center\" }} legendSettings={{ enableHighlight: true, shapeWidth: 9, shapeHeight: 9 }} primaryXAxis={{ majorGridLines: { width: 0 }, minorGridLines: { width: 0 }, majorTickLines: { width: 0 }, minorTickLines: { width: 0 }, interval: 1, lineStyle: { width: 0 }, labelIntersectAction: 'Rotate45', valueType: 'Category' }} primaryYAxis={{ title: 'Production (60KG Bags)', lineStyle: { width: 0 }, majorTickLines: { width: 0 }, majorGridLines: { width: 1 }, minorGridLines: { width: 1 }, minorTickLines: { width: 0 }, labelFormat: '{value}M', interval: 20 }} width={Browser.isDevice ? '100%' : '75%'} chartArea={{ border: { width: 0 }, margin: { bottom: 12 } }} title='Global Cotton Production by Country (2019–2024)' subTitle='Source: fas.usda.gov' loaded={onChartLoad.bind(this)} tooltip={{ enable: true, enableHighlight: true, header: '<b>${point.x}</b>', format: '${series.name} : <b>${point.y}</b>' }} legendClick={onLegendClick.bind(this)} stackLabels={{ visible: true, format: '{value}M', font: { size: Browser.isDevice ? '10px' : '12px' } }}>\n                    <Inject services={[StackingColumnSeries, Category, Legend, Tooltip, Highlight, DataLabel]} />\n                    <SeriesCollectionDirective>\n                        <SeriesDirective dataSource={data1} xName='x' yName='y' name='India' columnWidth={0.4} border={{ width: 1, color: \"white\" }} type='StackingColumn' marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>\n                        <SeriesDirective dataSource={data2} xName='x' yName='y' name='China' columnWidth={0.4} border={{ width: 1, color: \"white\" }} type='StackingColumn' marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>\n                        <SeriesDirective dataSource={data3} xName='x' yName='y' name='United States' columnWidth={0.4} border={{ width: 1, color: \"white\" }} type='StackingColumn' cornerRadius={{ topLeft: 4, topRight: 4 }} marker={{ dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } } }} legendShape='Rectangle'/>\n                    </SeriesCollectionDirective>\n                </ChartComponent>\n            </div>\n        </div>\n    )    \n}\nexport default StackedColumn;"
    }
  ]
}