Charts

TwAreaChart

TwAreaChart is a Blazor area chart: a line chart with the space beneath filled. Supports stacked areas and smooth or stepped curves.

Last updated 18 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

TwAreaChart is a line chart with the space under each line filled with a light wash, which emphasises volume. The scale always includes zero so the filled area stays honest.

Monthly visitorsThousands

RAZOR

<TwChart Title="Monthly visitors" Description="Thousands">
    <TwAreaChart Categories="@_months" Series="@_organic" />
</TwChart>

CSHARP

@code {
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    
    private readonly ChartSeries[] _organic = [new("Organic", [42, 48, 55, 61, 58, 70])];
}

Stacked

Set Stacked to pile the series on top of each other, showing how they add up to a total over time. Missing and negative values count as zero when stacked.

Monthly visitors by channel

RAZOR

<TwChart Title="Monthly visitors by channel">
    <TwAreaChart Categories="@_months" Series="@_visitors" Stacked="true" />
</TwChart>

CSHARP

@code {
    private readonly ChartSeries[] _visitors =
    [
        new("Organic", [42, 48, 55, 61, 58, 70]),
        new("Paid", [30, 34, 31, 45, 52, 49]),
        new("Referral", [12, 15, 21, 19, 26, 33])
    ];
}

Curves

Curve works as it does on a line chart: ChartCurve.Smooth for a spline area and ChartCurve.Step for a stepped one.

Monthly visitors

RAZOR

<TwChart Title="Monthly visitors">
    <TwAreaChart Categories="@_months" Series="@_organic" Curve="ChartCurve.Smooth" />
</TwChart>

Overlapping series

Without stacking, the washes overlap so every line stays visible. Past two or three series, stack them or use TwSmallMultiplesChart instead.

Monthly visitors by channel

RAZOR

<TwChart Title="Monthly visitors by channel">
    <TwAreaChart Categories="@_months" Series="@_visitors" />
</TwChart>

Summary

Tooltips and the table view give the value of every series for each category.

Shared features

The legend, tooltips, keyboard navigation, table view, value formatting, height and empty state work the same on every chart. See TwChart for those options.

The plot is a single Tab stop. Each data point is announced with its series and value as focus reaches it, and the table view presents the same data without the plot.

Key	What it does
`Tab`	Moves focus into the plot, onto the data point last visited.
`Arrow Right` or `Arrow Down`	Moves to the next data point.
`Arrow Left` or `Arrow Up`	Moves to the previous data point.
`Home` or `End`	Moves to the first or last data point.
`Escape`	Hides the tooltip of the focused data point.
`Enter` or `Space`	On a legend item: shows or hides that series. On the table button: switches between the chart and its data table.

TwAreaChart

Basic usage

Stacked

Curves

Overlapping series

Summary

Shared features

Keyboard navigation