{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "chart-stacked-column",
  "framework": "blazor",
  "type": "registry:component",
  "component": "Chart",
  "variant": "stacked-column",
  "dependencies": [
    "Syncfusion.Blazor.Charts"
  ],
  "description": "Stacked column chart compares cotton production by country with data labels, rounded corners, and interactive legend selection.",
  "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/blazor/llms.txt",
    "skillPack": "syncfusion/blazor-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/blazor/chart-stacked-column.md"
  },
  "files": [
    {
      "target": "src/components/chart-stacked-column/Chart.razor",
      "content": "@page \"/chart/stacked-column\"\n@using Syncfusion.Blazor.Charts\n\n<div class=\"control-section\" align='center'>\n    <SfChart Title=\"Global Cotton Production by Country (2018–2023)\" SubTitle=\"Source: fas.usda.gov\" Width=\"@Width\">\n        <ChartTitleStyle TextOverflow=\"TextOverflow.Wrap\"></ChartTitleStyle>\n        <ChartSubTitleStyle TextOverflow=\"TextOverflow.Wrap\"></ChartSubTitleStyle>\n        <ChartArea><ChartAreaBorder Width=\"0\"></ChartAreaBorder></ChartArea>\n        <ChartEvents OnLegendClick=\"OnLegendClick\"></ChartEvents>\n        <ChartPrimaryXAxis ValueType=\"Syncfusion.Blazor.Charts.ValueType.Category\" Interval=\"1\" LabelIntersectAction=\"LabelIntersectAction.Rotate45\">\n            <ChartAxisMajorGridLines Width=\"0\"></ChartAxisMajorGridLines>\n            <ChartAxisMinorGridLines Width=\"0\"></ChartAxisMinorGridLines>\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n            <ChartAxisMinorTickLines Width=\"0\"></ChartAxisMinorTickLines>\n            <ChartAxisLineStyle Width=\"0\"></ChartAxisLineStyle>\n        </ChartPrimaryXAxis>\n        <ChartPrimaryYAxis Title=\"Production (60KG Bags)\" Interval=\"20\" LabelFormat=\"{value}M\">           \n            <ChartAxisMinorGridLines Width=\"1\"></ChartAxisMinorGridLines>\n            <ChartAxisMajorTickLines Width=\"0\"></ChartAxisMajorTickLines>\n            <ChartAxisMinorTickLines Width=\"0\"></ChartAxisMinorTickLines>\n            <ChartAxisLineStyle Width=\"0\"></ChartAxisLineStyle>\n        </ChartPrimaryYAxis>\n        <ChartSeriesCollection>            \n            <ChartSeries @ref=\"FirstSeries\" ColumnWidth=\"0.4\" DataSource=\"@Data1\" XName=\"X\" YName=\"Y\" Width=\"2\" Name=\"India\" Type=\"ChartSeriesType.StackingColumn\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartSeriesBorder Width=\"1\" Color=\"#ffffff\"></ChartSeriesBorder>\n                <ChartCornerRadius TopLeft=\"@TopLeft1\" TopRight=\"@TopRight1\"></ChartCornerRadius>\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"true\">\n                        <ChartDataLabelFont Color=\"@DataLabelColor\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>\n            <ChartSeries @ref=\"SecondSeries\" ColumnWidth=\"0.4\" DataSource=\"@Data2\" XName=\"X\" YName=\"Y\" Width=\"2\" Name=\"China\" Type=\"ChartSeriesType.StackingColumn\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartSeriesBorder Width=\"1\" Color=\"#ffffff\"></ChartSeriesBorder>\n                <ChartCornerRadius TopLeft=\"@TopLeft2\" TopRight=\"@TopRight2\"></ChartCornerRadius>\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"true\">\n                        <ChartDataLabelFont Color=\"@DataLabelColor\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>\n            <ChartSeries @ref=\"ThirdSeries\" ColumnWidth=\"0.4\" DataSource=\"@Data3\" XName=\"X\" YName=\"Y\" Width=\"2\" Name=\"United States\" Type=\"ChartSeriesType.StackingColumn\" LegendShape=\"LegendShape.Rectangle\">\n                <ChartSeriesBorder Width=\"1\" Color=\"#ffffff\"></ChartSeriesBorder>\n                <ChartCornerRadius TopLeft=\"@TopLeft3\" TopRight=\"@TopRight3\"></ChartCornerRadius>\n                <ChartMarker>\n                    <ChartDataLabel Visible=\"true\">\n                        <ChartDataLabelFont Color=\"@DataLabelColor\"></ChartDataLabelFont>\n                    </ChartDataLabel>\n                </ChartMarker>\n            </ChartSeries>         \n        </ChartSeriesCollection>\n        <ChartStackLabelSettings Visible=\"true\" Format=\"{value}M\">\n            <ChartStackLabelFont Size=\"@Size\"></ChartStackLabelFont>\n        </ChartStackLabelSettings>\n        <ChartTooltipSettings Enable=\"true\" Header=\"<b>${point.x}</b>\" Format=\"${series.name}: <b>${point.y}</b>\" EnableHighlight=\"true\" Opacity=\"@Opacity\"></ChartTooltipSettings>\n        <ChartLegendSettings Visible=\"true\"  ShapeHeight=\"8\" ShapeWidth=\"8\" EnableHighlight=\"true\"></ChartLegendSettings>\n    </SfChart>\n</div>\n@code{\n    private ChartSeries? FirstSeries;\n    private ChartSeries? SecondSeries;\n    private ChartSeries? ThirdSeries;\n    private int TopLeft1 { get; set; } = 0;\n    private int TopRight1 { get; set; } = 0;\n    private int TopLeft2 { get; set; } = 0;\n    private int TopRight2 { get; set; } = 0;\n    private int TopLeft3 { get; set; } = 4;\n    private int TopRight3 { get; set; } = 4;\n    private string DataLabelColor { get; set; } = \"\";\n    private double Opacity = 1;\n    public string Width { get; set; } = \"90%\";\n    public string Size { get; set; } = \"12px\";\n    public class DataPoint\n    {\n        public string? X { get; set; }\n        public double Y { get; set; }\n    }\n    public List<DataPoint> Data1 = new List<DataPoint>\n    {\n        new DataPoint { X = \"2018\", Y = 26.0 },\n        new DataPoint { X = \"2019\", Y = 28.5 },\n        new DataPoint { X = \"2020\", Y = 27.5 },\n        new DataPoint { X = \"2021\", Y = 24.3 },\n        new DataPoint { X = \"2022\", Y = 26.3 },\n        new DataPoint { X = \"2023\", Y = 25.4 }\n    };\n    public List<DataPoint> Data2 = new List<DataPoint>\n    {\n        new DataPoint { X = \"2018\", Y = 27.3 },\n        new DataPoint { X = \"2019\", Y = 26.9 },\n        new DataPoint { X = \"2020\", Y = 29.3 },\n        new DataPoint { X = \"2021\", Y = 26.7 },\n        new DataPoint { X = \"2022\", Y = 30.8 },\n        new DataPoint { X = \"2023\", Y = 27.4 }\n    };\n    public List<DataPoint> Data3 = new List<DataPoint>\n    {\n        new DataPoint { X = \"2018\", Y = 18.4 },\n        new DataPoint { X = \"2019\", Y = 19.9 },\n        new DataPoint { X = \"2020\", Y = 14.6 },\n        new DataPoint { X = \"2021\", Y = 17.5 },\n        new DataPoint { X = \"2022\", Y = 14.5 },\n        new DataPoint { X = \"2023\", Y = 12.1 }\n    };\n    public void OnLegendClick(LegendClickEventArgs args)\n    { \n        if(args.Series.Name ==\"India\")\n        {\n            if(ThirdSeries != null && ThirdSeries.Visible)\n            {\n                TopLeft3 = 4;\n                TopRight3 = 4;\n                TopLeft1 = 0;\n                TopRight1 = 0;\n            }\n            else if(SecondSeries != null && SecondSeries.Visible)\n            {\n                TopLeft2 = 4;\n                TopRight2 = 4;\n                TopLeft1 = 0;\n                TopRight1 = 0;\n            }\n            else\n            {\n               TopLeft1 = 4;\n               TopRight1 = 4; \n            }\n        }\n        else if(args.Series.Name ==\"China\")\n        {\n             if (ThirdSeries != null && ThirdSeries.Visible) {\n                TopLeft3 = 4;\n                TopRight3 = 4;\n                TopLeft2 = 0;\n                TopRight2 = 0;\n            } else if (SecondSeries != null && SecondSeries.Visible && args.Series.Visible) {\n                TopLeft1 = 4;\n                TopRight1 = 4;\n                TopLeft2 = 0;\n                TopRight2 = 0;\n            } else {\n                TopLeft2 = 4;\n                TopRight2 = 4;\n                TopLeft1 = 0;\n                TopRight1 = 0;\n            }\n        }\n        else if(args.Series.Name ==\"United States\")\n        {\n            if (!args.Series.Visible) {\n                TopLeft3 = 4;\n                TopRight3 = 4;\n                TopLeft2 = 0;\n                TopRight2 = 0;\n                TopLeft1 = 0;\n                TopRight1 = 0;\n            } else if (SecondSeries != null && SecondSeries.Visible) {\n                TopLeft2 = 4;\n                TopRight2 = 4;\n                TopLeft3 = 0;\n                TopRight3 = 0;\n            } else if (args.Series.Visible && FirstSeries != null && FirstSeries.Visible) {\n                TopLeft1 = 4;\n                TopRight1 = 4;\n                TopLeft3 = 0;\n                TopRight3 = 0;\n            }\n        }\n    }\n}"
    }
  ]
}