DxChartAreaSeries<T, TArgument, TValue> Class

Defines an area series.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxChartAreaSeries<T, TArgument, TValue> :
    DxChartAreaSeriesBase<T, TArgument, TValue>

Type Parameters

Name	Description
T

The data type.

| | TArgument |

The argument type.

| | TValue |

The value type.

Remarks

The area series displays data as a polyline that connects the series values. The area between the polyline and the argument axis is shaded with a color.

Follow the steps below to create an area series:

Use the DxChart.Data property to specify an IEnumerable<T> data source.
Add a DxChartAreaSeries object to chart markup.
Use series ArgumentField and ValueField properties to specify data source fields that contain arguments and values for chart points.

For a sample data source, refer to our GitHub repository.

razor

@inject ISalesInfoDataProvider Sales
    <DxChart Data="@chartsData"
             Width="100%"
             LabelOverlap="ChartLabelOverlap.Hide">
        <DxChartAreaSeries Name="North America"
                           T="SaleInfo"
                           TArgument="DateTime"
                           TValue="int"
                           ArgumentField="si => new DateTime(si.Date.Year, si.Date.Month, 1)"
                           ValueField="si => si.Amount"
                           SummaryMethod="Enumerable.Sum"
                           Filter='si => si.Region == "North America" '
                           HoverMode="ChartContinuousSeriesHoverMode.None">
            <DxChartSeriesPoint Visible=ShowSeriesPointMarkers
                                HoverMode="ChartSeriesPointHoverMode.None" />
            <DxChartSeriesLabel Visible=ShowSeriesLabels
                                ValueFormat="ChartElementFormat.Thousands(1)" />
        </DxChartAreaSeries>
        <DxChartLegend Position="RelativePosition.Outside"
                       HorizontalAlignment="HorizontalAlignment.Right" />
    </DxChart>
@code {
    IEnumerable<SaleInfo> chartsData;

    [Parameter] public bool ShowSeriesPointMarkers { get; set; }
    [Parameter] public bool ShowSeriesLabels { get; set; }

    protected override async Task OnInitializedAsync() {
        chartsData = await Sales.GetSalesAsync();
    }
}

Run Demo: Charts - Area Series

Implements

Inheritance

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