DxChartBarSeriesBase<T, TArgument, TValue>.BarOverlapGroupName Property

Groups bar series and displays overlapping bars.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string BarOverlapGroupName { get; set; }

Property Value

Type	Description
String	The group name.

Remarks

In DxChart, you can combine multiple bar series into a group. This allows the bars with the same argument overlap based on the series order in the chart’s markup. To combine multiple bar series, set their BarOverlapGroupName properties to the same value.

The following example combines two bar series into a group:

<DxChart T="PopulationAgeStructureItem"
         Data="@ChartsData"
         Width="100%">
    <DxChartTitle Text="Population: Age Structure">
        <DxChartSubTitle Text="Data Estimate for 2020" />
    </DxChartTitle>
    <DxChartBarSeries Name="0-14 years"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "0-14 years"' />
    <DxChartBarSeries Name="15-64 years"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "15-64 years"'
                      BarOverlapGroupName="BarGroup" />
    <DxChartBarSeries Name="65 years and older"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "65 years and older"'
                      BarOverlapGroupName="BarGroup"
                      BarWidth="25"/>
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Center"
                   VerticalAlignment="VerticalEdge.Bottom" />
</DxChart>

@code {
    IEnumerable<PopulationAgeStructureItem> ChartsData;

    protected override async Task OnInitializedAsync() {
        ChartsData = await DataProvider.QueryData();
    }
}