The AreaChart component renders filled area charts, ideal for emphasizing volume, magnitude, and cumulative trends. Built on ApexCharts.Blazor with gradient fills and smooth curves.

Installation

shellui add chart area-chart
dotnet add package Blazor-ApexCharts

chart and chart-variants are auto-installed as dependencies.

Basic Usage

<AreaChart TItem="MemoryUsage"
    Data="@memoryData"
    Title="Memory Usage Over Time"
    Name="Usage (MB)"
    XValue="@(e => e.Time)"
    YValue="@(e => (decimal?)e.UsageMB)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<MemoryUsage> memoryData = new()
    {
        new("10:00", 512), new("10:05", 640),
        new("10:10", 580), new("10:15", 720),
        new("10:20", 690), new("10:25", 810)
    };

    record MemoryUsage(string Time, int UsageMB);
}

Network Traffic

<AreaChart TItem="NetworkData"
    Data="@networkData"
    Title="Network Bandwidth"
    Subtitle="Inbound traffic (Mbps)"
    Name="Bandwidth"
    XValue="@(e => e.Time)"
    YValue="@(e => (decimal?)e.Mbps)"
    Theme="ChartTheme.Colorful"
    Height="400px" />

@code {
    private List<NetworkData> networkData = new()
    {
        new("00:00", 45), new("04:00", 22), new("08:00", 120),
        new("12:00", 250), new("16:00", 310), new("20:00", 180), new("23:59", 65)
    };

    record NetworkData(string Time, int Mbps);
}

Cumulative Revenue

<AreaChart TItem="RevenueData"
    Data="@revenueData"
    Title="Cumulative Revenue"
    Subtitle="FY 2024"
    Name="Revenue (USD)"
    XValue="@(e => e.Quarter)"
    YValue="@(e => (decimal?)e.Cumulative)"
    Theme="ChartTheme.Default"
    Height="350px" />

@code {
    private List<RevenueData> revenueData = new()
    {
        new("Q1", 150000), new("Q2", 340000),
        new("Q3", 520000), new("Q4", 780000)
    };

    record RevenueData(string Quarter, decimal Cumulative);
}

Multiple Areas

For multiple filled areas, use Multi-Series Chart with SeriesType.Area.

API Reference

Property	Type	Default	Description
`TItem`	Generic type	—	The data item type
`Data`	`IEnumerable<TItem>?`	`null`	Data collection to visualize
`Name`	`string`	`"Data"`	Series name shown in legend/tooltip
`XValue`	`Func<TItem, object>?`	`null`	Function to extract X-axis value
`YValue`	`Func<TItem, decimal?>?`	`null`	Function to extract Y-axis value
`Theme`	`ChartTheme`	`Default`	Color theme (Default, Colorful, Monochrome)
`Title`	`string?`	`null`	Chart title
`Subtitle`	`string?`	`null`	Chart subtitle
`Height`	`string?`	`"400px"`	Chart height
`Width`	`string?`	`"100%"`	Chart width
`Class`	`string?`	`null`	Additional CSS classes

Area Chart