DxChartAreaSeries<T, TArgument, TValue> Class

Defines an area series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartAreaSeries<T, TArgument, TValue> :
    DxChartSeries<T, TArgument, TValue, ChartAreaSeriesModel<T, TArgument, TValue>>

Type Parameters

Name	Description
T	The type of data.
TArgument	The type of series arguments.
TValue	The type of series values.

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.

Use the chart’s Data property to specify an IEnumerable<T> data source, and the 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

<DxChart Data="@SalesData">
    <DxChartAreaSeries Name="2017" Filter="@((SaleInfo s) => s.Date.Year == 2017)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
                       AggregationMethod="Enumerable.Sum" />
    <DxChartAreaSeries Name="2018" Filter="@((SaleInfo s) => s.Date.Year == 2018)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
                       AggregationMethod="Enumerable.Sum" />
    <DxChartAreaSeries Name="2019" Filter="@((SaleInfo s) => s.Date.Year == 2019)"
                       ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"
                       AggregationMethod="Enumerable.Sum" />
    <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
</DxChart>

@code {
    IEnumerable<SaleInfo> SalesData;

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

SaleInfo

using System;

public class SaleInfo {
    public int OrderId { get; set; }
    public string Region { get; set; }
    public string Country { get; set; }
    public string City { get; set; }
    public int Amount { get; set; }
    public DateTime Date { get; set; }
}

Sales

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

public class Sales {
    static IList<SaleInfo> dataSource;
    static Sales() {
        CreateDataSource();
    }

    public static Task<IQueryable<SaleInfo>> GetSalesAsync() {
        return Task.FromResult(dataSource.AsQueryable());
    }

    static void CreateDataSource() {
        dataSource = new List<SaleInfo> {
        new SaleInfo {
                OrderId = 10248,
                Region = "North America",
                Country = "United States",
                City = "New York",
                Amount = 1740,
                Date = DateTime.Parse("2017/01/06")
            },
            new SaleInfo {
                OrderId = 10249,
                Region = "North America",
                Country = "United States",
                City = "Los Angeles",
                Amount = 850,
                Date = DateTime.Parse("2017/01/13")
            },
            new SaleInfo {
                OrderId = 10250,
                Region = "North America",
                Country = "United States",
                City = "Denver",
                Amount = 2235,
                Date = DateTime.Parse("2017/01/07")
            },
            new SaleInfo {
                OrderId = 10251,
                Region = "North America",
                Country = "Canada",
                City = "Vancouver",
                Amount = 1965,
                Date = DateTime.Parse("2017/01/03")
            },
            new SaleInfo {
                OrderId = 10252,
                Region = "North America",
                Country = "Canada",
                City = "Edmonton",
                Amount = 880,
                Date = DateTime.Parse("2017/01/10")
            },
            new SaleInfo {
                OrderId = 10253,
                Region = "South America",
                Country = "Brazil",
                City = "Rio de Janeiro",
                Amount = 5260,
                Date = DateTime.Parse("2017/01/17")
            },
            new SaleInfo {
                OrderId = 10254,
                Region = "South America",
                Country = "Argentina",
                City = "Buenos Aires",
                Amount = 2790,
                Date = DateTime.Parse("2017/01/21")
            },
            new SaleInfo {
                OrderId = 10255,
                Region = "South America",
                Country = "Paraguay",
                City = "Asuncion",
                Amount = 3140,
                Date = DateTime.Parse("2017/01/01")
            },
            new SaleInfo {
                OrderId = 10256,
                Region = "Europe",
                Country = "United Kingdom",
                City = "London",
                Amount = 6175,
                Date = DateTime.Parse("2017/01/24")
            },
            new SaleInfo {
                OrderId = 10257,
                Region = "Europe",
                Country = "Germany",
                City = "Berlin",
                Amount = 4575,
                Date = DateTime.Parse("2017/01/11")
            },
            //...
    };
    }
}

Run Demo: Charts - Series Types

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.ChartSeriesModel>

DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.Internal.ChartSeriesModel>

DxChartSeries

DxChartSeries<T, TArgument, TValue, TValue, DevExpress.Blazor.Internal.ChartAreaSeriesModel<T, TArgument, TValue>>

DxChartSeries<T, TArgument, TValue, DevExpress.Blazor.Internal.ChartAreaSeriesModel<T, TArgument, TValue>>

DxChartAreaSeries<T, TArgument, TValue>