Back to Devexpress

DxChartRangeBarSeries<T, TArgument, TValue> Class

blazor-devexpress-dot-blazor-dot-dxchartrangebarseries-3.md

latest4.8 KB
Original Source

DxChartRangeBarSeries<T, TArgument, TValue> Class

Defines a range bar series.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Type Parameters

NameDescription
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:

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

razor
@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

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IChartSeries

IChartSeriesBase

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.IXYChartSeriesModel> DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.Internal.IXYChartSeriesModel> DxChartSeries DxChartXYSeries<T, TArgument, TValue, TValue> DxChartRangeSeriesBase<T, TArgument, TValue> DxChartRangeBarSeries<T, TArgument, TValue>

See Also

DxChartRangeBarSeries<T, TArgument, TValue> Members

DevExpress.Blazor Namespace