Area Charts

Area chart components with support for gradient fills, smooth curves, and multiple series.

Default

A basic area chart with gradient fill.

Area Chart

Showing total visitors over time

JanFebMarAprMayJun
Desktop
Mobile
// Config
var config = new ChartConfig
{
    ["desktop"] = new ChartConfigEntry { Label = "Desktop", Color = "hsl(var(--chart-1))" },
    ["mobile"]  = new ChartConfigEntry { Label = "Mobile",  Color = "hsl(var(--chart-2))" }
};

// Areas animate in: line draws in, then the fill fades in.
// Use Gradient="true" for a top-to-bottom gradient fill.
<ChartContainer Config="@config" Class="h-[300px]">
    <AreaChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <Area DataKey="desktop" Fill="var(--color-desktop)" Gradient="true" />
        <Area DataKey="mobile" Fill="var(--color-mobile)" Gradient="true" />
        <ChartTooltip />
    </AreaChart>
    <ChartLegend />
</ChartContainer>

Linear Curve

An area chart with linear interpolation.

Area Chart - Linear

Using linear curve type

JanFebMarAprMayJun 
// Type="CurveType.Linear" for straight segments.
// Dot="true" to show data point markers.
<ChartContainer Config="@config" Class="h-[300px]">
    <AreaChart Data="@data" XDataKey="month">
        <CartesianGrid Vertical="false" />
        <XAxis TickLine="false" AxisLine="false" />
        <Area DataKey="desktop" Type="CurveType.Linear"
              Fill="var(--color-desktop)" Gradient="true"
              Dot="true" />
        <ChartTooltip />
    </AreaChart>
</ChartContainer>