DxChartRangeAreaSeries<T, TArgument, TValue> Class

Defines a range area series.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxChartRangeAreaSeries<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 Area series display data as a color-filled space between lines. The Chart selects the maximum and minimum values from data points with an equal argument to specify start and end values.

Follow the steps below to create a range area 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.

razor

@inject IWeatherSummaryDataProvider WeatherSummaryDataProvider

<DxChart @ref="@chart"
         Data="@weatherForecasts"
         Width="100%">
    <DxChartTitle Text="Annual Temperature in Hilo, Hawaii" />
    <DxChartRangeAreaSeries StartValueField="(DetailedWeatherSummary i) => i.MinTemperatureF"
                            EndValueField="i=>i.MaxTemperatureF"
                            ArgumentField="i => new DateTime(2000, i.Date.Month, 1)"
                            Name="Temperature, °F"
                            Filter="@((DetailedWeatherSummary i) => i.City == "HILO")">
        <DxChartSeriesLabel Visible="true"
                            ValueFormat="@(ChartElementFormat.FromLdmlString("0# °F"))" />
        <DxChartSeriesPoint Visible="true" />
    </DxChartRangeAreaSeries>
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Temperature, °F" />
    </DxChartValueAxis>
    <DxChartLegend Visible="false" />
    <DxChartArgumentAxis SideMarginsEnabled="false">
        <DxChartAxisLabel Format="ChartElementFormat.Month" />
    </DxChartArgumentAxis>
</DxChart>
@code {
    IEnumerable<DetailedWeatherSummary> weatherForecasts;
    protected override async Task OnInitializedAsync() {
        weatherForecasts = await WeatherSummaryDataProvider.GetDataAsync(true);
    }
}

Run Demo: DxChart - Range Area Series

Implements

Inheritance

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