DxChartRangeBarSeries<T, TArgument, TValue> Class

Defines a range bar series.

Assembly: DevExpress.Blazor.v25.2.dll

Declaration

public class DxChartRangeBarSeries<T, TArgument, TValue> :
    DxChartRangeSeriesBase<T, TArgument, TValue>

Type Parameters

Name	Description
T	The data type.
TArgument	The argument type.
TValue	The value type.

Remarks

Range bar series display value ranges that correspond to argument values. The Chart selects the maximum and minimum bar limits from data points with an equal argument to specify start and end values.

Follow the steps below to create a range bar series:

Use the DxChart.Data property to specify an IEnumerable<T> data source.
Add a DxChartRangeAreaSeries object to chart markup.
Use series ArgumentField and ValueField properties to specify data source fields that contain arguments and values for chart points.
Optional. Use series StartValueField and EndValueField properties to define how to obtain start and end point values.

DxChart - Range Bar series

@inject IWeatherSummaryDataProvider WeatherSummaryDataProvider

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

Run Demo: DxChart - Range Bar Series