Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxChartStackedBarSeriesBase<T, TArgument, TValue>.Stack Property

Specifies the stack in a side-by-side stacked series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue("default")]
[Parameter]
public string Stack { get; set; }

#Property Value

Type Default Description
String "default"

The stack identifier.

#Remarks

This property is applicable only to DxChartStackedBarSeries and DxChartFullStackedBarSeries.

If you do not specify the Stack property, the chart displays a single stack for each argument - the control displays a regular stacked or full-stacked bar view.

Regular Full-Stacked View

You can initialize the Stack property to display side-by-side stacked charts. For example, the following image shows the Chart with the same settings, except the Stack property specifies gender. The chart then displays side-by-side gender-specific stacks.

Side-by-Side Stacked Bar

Side-by-side display enhances chart readability and allows users to compare stacks displayed next to each other.

The number of stacks is unlimited.

The following code snippet creates a side-by-side chart as in the image above. The example uses the Common series and Data property to define the stacked bar template. Alternatively, you can omit the template definition. Define all series and specify the Stack property for each series individually.

<DxChart T="PopulationAgeStructureItem"
         Data="@ChartsData"
         Width="100%">
    <DxChartCommonSeries T="PopulationAgeStructureItem"
                         TArgument="string"
                         TValue="int"
                         TGroup="string"
                         NameField='pasi => $"{pasi.Gender}: {pasi.AgeGroup}"'>
        <SeriesTemplate Context="settings">
            <DxChartStackedBarSeries Settings="@settings"
                                     ArgumentField="pasi => pasi.Country"
                                     ValueField="pasi => pasi.Population"
                                     Stack="@settings.Data.First().Gender" />
        </SeriesTemplate>
    </DxChartCommonSeries>
    @* ... *@
</DxChart>

@code {
    IEnumerable<PopulationAgeStructureItem> ChartsData;
    protected override async Task OnInitializedAsync()
    {
        ChartsData = await DataProvider.QueryData();
    }
}

Run Demo: Charts - Bar Series

See Also