DxChartRangeBarSeries<T, TArgument, TValue>.BarOverlapGroupName Property

Groups range 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 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:

<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();
    }
}