Search results

Stacked Column in Blazor Chart component

20 Apr 2021 / 2 minutes to read

Stacked

Blazor Stacked Column Chart is used to plots data points on top of each other using vertical bars. To render a stacked column series, use series Type as StackingColumn.

stackedcolumn.razor
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart Width="60%">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.StackingColumn">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" Type="ChartSeriesType.StackingColumn">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code{
    public class ChartData
    {
        public string X { get; set; }
        public double YValue { get; set; }
        public double YValue1 { get; set; }
    }
    public List<ChartData> MedalDetails = new List<ChartData>
{
        new ChartData { X= "USA", YValue= 46, YValue1=56 },
        new ChartData { X= "GBR", YValue= 27, YValue1=17 },
        new ChartData { X= "CHN", YValue= 26, YValue1=36 },
        new ChartData { X= "UK", YValue= 56,  YValue1=16 },
        new ChartData { X= "AUS", YValue= 12, YValue1=46 },
        new ChartData { X= "IND", YValue= 26, YValue1=16 },
        new ChartData { X= "DEN", YValue= 26, YValue1=12 },
        new ChartData { X= "MEX", YValue= 34, YValue1=32},
    };
}

Stacked Column

Note: You can also explore our Blazor Stacked Column Chart Example to knows how to render and configure the stacking column type chart.

Customization

You can use the following properties to customize the stacked column series.

  • Fill – used to change the color of the stacked column.
  • Opacity – used to control the transparency of the chart series.
  • DashArray – used to render stacked column series with dashes.
  • Border – used to render stacked column with border.
Copied to clipboard
@using Syncfusion.Blazor.Charts

<SfChart>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>

<ChartSeriesCollection>
    <ChartSeries DataSource="@DataSource" XName="X" DashArray="5,5" Fill="red" Opacity="0.7" YName="YValue" Type="ChartSeriesType.StackingColumn">
    </ChartSeries>
    <ChartSeries DataSource="@DataSource" XName="X" DashArray="5,5" Fill="blue" Opacity="0.7" YName="YValue" Type="ChartSeriesType.StackingColumn">
    </ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code{
public class ChartData
{
    public string X { get; set; }
    public double YValue { get; set; }
    public double YValue1 { get; set; }
}

public List<ChartData> DataSource = new List<ChartData>
{
    new ChartData { X= "USA", YValue= 46, YValue1=56 },
    new ChartData { X= "GBR", YValue= 27, YValue1=17 },
    new ChartData { X= "CHN", YValue= 26, YValue1=36 },
    new ChartData { X= "UK", YValue= 56,  YValue1=16 },
    new ChartData { X= "AUS", YValue= 12, YValue1=46 },
    new ChartData { X= "IND", YValue= 26, YValue1=16 },
    new ChartData { X= "DEN", YValue= 26, YValue1=12 },
    new ChartData { X= "MEX", YValue= 34, YValue1=32},
};
}

Custom Stacked Column

Note: You can refer to our Blazor Charts feature tour page for its groundbreaking feature representations. You can also explore our Blazor Chart example to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.

See Also