Skip to main content
All docs
V24.2

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

DxChartRangeBarSeries<T, TArgument, TValue>.BarOverlapGroupName Property

Groups range bar series and displays overlapping bars.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

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

#Property Value

Type Description
String

The group name.

#Remarks

In DxChart, you can combine multiple range 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 range bar series, set their BarOverlapGroupName properties to the same value.

The following example combines two bar series into a group:

razor
<DxChart @ref="@chart"
         Data="@weatherForecasts"
         Width="100%">
    <DxChartTitle Text="Annual Temperature" />
    <DxChartRangeBarSeries ValueField="@((DetailedWeatherSummary  i) => i.AverageTemperatureF)"
                           ArgumentField="@(i => new DateTime(2000, i.Date.Month, 1))"
                           Name="New York"
                           Filter="@((DetailedWeatherSummary  i) => i.City == "NEW YORK")"
                           BarOverlapGroupName="BarGroup"/>
    <DxChartRangeBarSeries ValueField="@((DetailedWeatherSummary  i) => i.AverageTemperatureF)"
                           ArgumentField="@(i => new DateTime(2000, i.Date.Month, 1))"
                           Name="Los Angeles"
                           Filter="@((DetailedWeatherSummary  i) => i.City == "LOS ANGELES")"
                           BarOverlapGroupName="BarGroup"/>
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Center"
                   VerticalAlignment="VerticalEdge.Bottom"
                   Position="RelativePosition.Outside" />
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Temperature, °F" />
    </DxChartValueAxis>
    <DxChartArgumentAxis>
        <DxChartAxisLabel Format="ChartElementFormat.Month" />
    </DxChartArgumentAxis>
</DxChart>

@code {
    IEnumerable<DetailedWeatherSummary> weatherForecasts;

    protected override async Task OnInitializedAsync() {
        weatherForecasts = await WeatherSummaryDataProvider.GetDataAsync();
    }
}

DxChartRangeBarSeries - Overlap group

See Also