# chart-stacked-column

> Stacked column chart compares cotton production by country with data labels, rounded corners, and interactive legend selection.

**Framework:** blazor  **Component:** Chart  **Variant:** stacked-column

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/chart-stacked-column.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Charts
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/chart-stacked-column/Chart.razor

```razor
@page "/chart/stacked-column"
@using Syncfusion.Blazor.Charts

<div class="control-section" align='center'>
    <SfChart Title="Global Cotton Production by Country (2018–2023)" SubTitle="Source: fas.usda.gov" Width="@Width">
        <ChartTitleStyle TextOverflow="TextOverflow.Wrap"></ChartTitleStyle>
        <ChartSubTitleStyle TextOverflow="TextOverflow.Wrap"></ChartSubTitleStyle>
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartEvents OnLegendClick="OnLegendClick"></ChartEvents>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate45">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Production (60KG Bags)" Interval="20" LabelFormat="{value}M">           
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>            
            <ChartSeries @ref="FirstSeries" ColumnWidth="0.4" DataSource="@Data1" XName="X" YName="Y" Width="2" Name="India" Type="ChartSeriesType.StackingColumn" LegendShape="LegendShape.Rectangle">
                <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
                <ChartCornerRadius TopLeft="@TopLeft1" TopRight="@TopRight1"></ChartCornerRadius>
                <ChartMarker>
                    <ChartDataLabel Visible="true">
                        <ChartDataLabelFont Color="@DataLabelColor"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries @ref="SecondSeries" ColumnWidth="0.4" DataSource="@Data2" XName="X" YName="Y" Width="2" Name="China" Type="ChartSeriesType.StackingColumn" LegendShape="LegendShape.Rectangle">
                <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
                <ChartCornerRadius TopLeft="@TopLeft2" TopRight="@TopRight2"></ChartCornerRadius>
                <ChartMarker>
                    <ChartDataLabel Visible="true">
                        <ChartDataLabelFont Color="@DataLabelColor"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries @ref="ThirdSeries" ColumnWidth="0.4" DataSource="@Data3" XName="X" YName="Y" Width="2" Name="United States" Type="ChartSeriesType.StackingColumn" LegendShape="LegendShape.Rectangle">
                <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>
                <ChartCornerRadius TopLeft="@TopLeft3" TopRight="@TopRight3"></ChartCornerRadius>
                <ChartMarker>
                    <ChartDataLabel Visible="true">
                        <ChartDataLabelFont Color="@DataLabelColor"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>         
        </ChartSeriesCollection>
        <ChartStackLabelSettings Visible="true" Format="{value}M">
            <ChartStackLabelFont Size="@Size"></ChartStackLabelFont>
        </ChartStackLabelSettings>
        <ChartTooltipSettings Enable="true" Header="<b>${point.x}</b>" Format="${series.name}: <b>${point.y}</b>" EnableHighlight="true" Opacity="@Opacity"></ChartTooltipSettings>
        <ChartLegendSettings Visible="true"  ShapeHeight="8" ShapeWidth="8" EnableHighlight="true"></ChartLegendSettings>
    </SfChart>
</div>
@code{
    private ChartSeries? FirstSeries;
    private ChartSeries? SecondSeries;
    private ChartSeries? ThirdSeries;
    private int TopLeft1 { get; set; } = 0;
    private int TopRight1 { get; set; } = 0;
    private int TopLeft2 { get; set; } = 0;
    private int TopRight2 { get; set; } = 0;
    private int TopLeft3 { get; set; } = 4;
    private int TopRight3 { get; set; } = 4;
    private string DataLabelColor { get; set; } = "";
    private double Opacity = 1;
    public string Width { get; set; } = "90%";
    public string Size { get; set; } = "12px";
    public class DataPoint
    {
        public string? X { get; set; }
        public double Y { get; set; }
    }
    public List<DataPoint> Data1 = new List<DataPoint>
    {
        new DataPoint { X = "2018", Y = 26.0 },
        new DataPoint { X = "2019", Y = 28.5 },
        new DataPoint { X = "2020", Y = 27.5 },
        new DataPoint { X = "2021", Y = 24.3 },
        new DataPoint { X = "2022", Y = 26.3 },
        new DataPoint { X = "2023", Y = 25.4 }
    };
    public List<DataPoint> Data2 = new List<DataPoint>
    {
        new DataPoint { X = "2018", Y = 27.3 },
        new DataPoint { X = "2019", Y = 26.9 },
        new DataPoint { X = "2020", Y = 29.3 },
        new DataPoint { X = "2021", Y = 26.7 },
        new DataPoint { X = "2022", Y = 30.8 },
        new DataPoint { X = "2023", Y = 27.4 }
    };
    public List<DataPoint> Data3 = new List<DataPoint>
    {
        new DataPoint { X = "2018", Y = 18.4 },
        new DataPoint { X = "2019", Y = 19.9 },
        new DataPoint { X = "2020", Y = 14.6 },
        new DataPoint { X = "2021", Y = 17.5 },
        new DataPoint { X = "2022", Y = 14.5 },
        new DataPoint { X = "2023", Y = 12.1 }
    };
    public void OnLegendClick(LegendClickEventArgs args)
    { 
        if(args.Series.Name =="India")
        {
            if(ThirdSeries != null && ThirdSeries.Visible)
            {
                TopLeft3 = 4;
                TopRight3 = 4;
                TopLeft1 = 0;
                TopRight1 = 0;
            }
            else if(SecondSeries != null && SecondSeries.Visible)
            {
                TopLeft2 = 4;
                TopRight2 = 4;
                TopLeft1 = 0;
                TopRight1 = 0;
            }
            else
            {
               TopLeft1 = 4;
               TopRight1 = 4; 
            }
        }
        else if(args.Series.Name =="China")
        {
             if (ThirdSeries != null && ThirdSeries.Visible) {
                TopLeft3 = 4;
                TopRight3 = 4;
                TopLeft2 = 0;
                TopRight2 = 0;
            } else if (SecondSeries != null && SecondSeries.Visible && args.Series.Visible) {
                TopLeft1 = 4;
                TopRight1 = 4;
                TopLeft2 = 0;
                TopRight2 = 0;
            } else {
                TopLeft2 = 4;
                TopRight2 = 4;
                TopLeft1 = 0;
                TopRight1 = 0;
            }
        }
        else if(args.Series.Name =="United States")
        {
            if (!args.Series.Visible) {
                TopLeft3 = 4;
                TopRight3 = 4;
                TopLeft2 = 0;
                TopRight2 = 0;
                TopLeft1 = 0;
                TopRight1 = 0;
            } else if (SecondSeries != null && SecondSeries.Visible) {
                TopLeft2 = 4;
                TopRight2 = 4;
                TopLeft3 = 0;
                TopRight3 = 0;
            } else if (args.Series.Visible && FirstSeries != null && FirstSeries.Visible) {
                TopLeft1 = 4;
                TopRight1 = 4;
                TopLeft3 = 0;
                TopRight3 = 0;
            }
        }
    }
}
```