{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-column",
  "framework": "angular",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-column",
  "dependencies": [
    "@syncfusion/ej2-angular-charts"
  ],
  "description": "Stacked Column chart of country-level cotton production from 2019-2024 with legend-driven corners.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/chart-stacked-column.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-column/stacked-column.component.ts",
      "content": "import { Component, ViewEncapsulation } from '@angular/core';\nimport { ILoadedEventArgs, ChartAllModule, ILegendClickEventArgs } from '@syncfusion/ej2-angular-charts';\nimport { Browser } from '@syncfusion/ej2-base';\nimport { loadChartTheme } from '../theme-color';\n\n/**\n * Sample for Stacked Column Series\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'stacked-column.html',\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [ ChartAllModule]\n})\nexport class StackedColumnChartComponent {\n\n    public 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        ];\n    public 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        ];\n    public 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    //Initializing Primary X Axis\n    public primaryXAxis: Object = {\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    public primaryYAxis: Object = {\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    public cornerRadius: Object = { topLeft: 4, topRight: 4 };\n    public stackLabels: Object = { visible: true, format: '{value}M', font: { size: Browser.isDevice ? '10px' : '12px' } };\n    public tooltip: Object = {\n        enable: true,\n        enableHighlight: true,\n        header: '<b>${point.x}</b>',\n        format: '${series.name} : <b>${point.y}</b>'\n    };\n    // custom code start\n    public load(args: ILoadedEventArgs): void {\n        loadChartTheme(args);\n    };\n    public 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    // custom code end\n    public title: string = 'Global Cotton Production by Country (2019–2024)';\n    public subTitle: string = 'Source: fas.usda.gov';\n    public chartArea: Object = {\n        border: {\n            width: 0\n        },\n        margin: {\n            bottom: 12\n        }\n    };\n    public legend: Object = {\n        enableHighlight: true,\n        shapeWidth: 9,\n        shapeHeight: 9\n    }\n    public marker: Object = {\n        dataLabel: { visible: true, font: { size: Browser.isDevice ? '10px' : '12px' } }\n    };\n    public border: Object = { color: 'white', width: 1 };\n    public width: string = Browser.isDevice ? '100%' : '75%';\n\n    constructor() {\n        //code\n    };\n\n}"
    },
    {
      "target": "src/components/chart-stacked-column/stacked-column.html",
      "content": "\n<div class=\"control-section\">\n    <div align='center'>\n        <ejs-chart style='display:block;' [chartArea]='chartArea' [stackLabels]='stackLabels' [width]='width' align='center' id='chartcontainer' [primaryXAxis]='primaryXAxis'\n            [primaryYAxis]='primaryYAxis' [title]='title' [subTitle]='subTitle' [tooltip]='tooltip' (load)='load($event)' (legendClick)='legendClick($event)' [legendSettings]='legend'>\n            <e-series-collection>\n                <e-series [dataSource]='data1' type='StackingColumn' xName='x' yName='y' name='India' columnWidth=0.4 [border]='border' [marker]='marker' legendShape='Rectangle'> </e-series>\n                <e-series [dataSource]='data2' type='StackingColumn' xName='x' yName='y' name='China' columnWidth=0.4 [border]='border' [marker]='marker' legendShape='Rectangle'> </e-series>\n                <e-series [dataSource]='data3' 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"
    }
  ]
}