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

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

Visualize bandwidth usage with the Colorful theme:

<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);
}

Revenue Over Quarters

Track cumulative revenue with the filled area emphasizing growth:

<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);
}

CPU Utilization

Monitor system resources with the Monochrome theme:

<AreaChart TItem="CpuData"
    Data="@cpuData"
    Title="CPU Utilization"
    Name="Usage (%)"
    XValue="@(e => e.Time)"
    YValue="@(e => (decimal?)e.UsagePercent)"
    Theme="ChartTheme.Monochrome"
    Height="300px" />

@code {
    private List<CpuData> cpuData = new()
    {
        new("10:00", 35), new("10:05", 42),
        new("10:10", 78), new("10:15", 65),
        new("10:20", 52), new("10:25", 38),
        new("10:30", 45)
    };

    record CpuData(string Time, int UsagePercent);
}

Comparing with Multi-Series

For multiple filled areas on the same chart, use MultiSeriesChart with SeriesType.Area:

<MultiSeriesChart TItem="TrafficData"
    Title="Traffic Sources"
    Theme="ChartTheme.Colorful"
    Height="400px">

    <ChartSeries TItem="TrafficData"
        Data="@data" Name="Organic"
        SeriesType="SeriesType.Area"
        XValue="@(e => e.Month)"
        YValue="@(e => (decimal?)e.Organic)" />

    <ChartSeries TItem="TrafficData"
        Data="@data" Name="Paid"
        SeriesType="SeriesType.Area"
        XValue="@(e => e.Month)"
        YValue="@(e => (decimal?)e.Paid)" />
</MultiSeriesChart>

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

When to Use

Volume emphasis: When the filled area helps convey magnitude (bandwidth, memory, revenue)
Cumulative data: Running totals where the area under the curve is meaningful
Resource monitoring: CPU, memory, disk, network dashboards
Single series: For one area — use MultiSeriesChart for stacked/overlapping areas

Area Chart