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