Stacked Bar in Blazor Chart component

14 Apr 2021 / 2 minutes to read

Stacked

Blazor Stacked Bar Chart is used to plots data points on top of each other using horizontal bars. To render a stacked bar series, use series Type as StackingBar.

stackedbar.razor

@using Syncfusion.Blazor.Charts

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

    <ChartSeriesCollection>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" Type="ChartSeriesType.StackingBar">
        </ChartSeries>
        <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" Type="ChartSeriesType.StackingBar">
        </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 bar

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

Customization

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

Fill – used to change the color of the stacked bar.
Opacity – used to control the transparency of the chart series.
DashArray – used to render stacked bar series with dashes.
Border – used to render stacked bar with border.

@using Syncfusion.Blazor.Charts

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

<ChartSeriesCollection>
    <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" DashArray="5,5" Fill="blue" Opacity="0.7" Type="ChartSeriesType.StackingBar">
        <ChartSeriesBorder Width="2" Color="black"></ChartSeriesBorder>
    </ChartSeries>
    <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" DashArray="5,5" Fill="red" Opacity="0.7" Type="ChartSeriesType.StackingBar">
        <ChartSeriesBorder Width="2" Color="black"></ChartSeriesBorder>
    </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},
};
}

Custom Stacked bar

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.

Stacked Bar in Blazor Chart component

Stacked

Customization

See Also