Charts

TwLineChart

TwLineChart is a Blazor line chart for trends. Supports straight, smooth (spline) and step lines, markers and gaps for missing values.

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

TwLineChart joins values in category order to show a trend. Hover or focus anywhere in a category and one tooltip lists every series at that point, so the pointer never has to land on a line.

Monthly visitorsThousands

RAZOR

<TwChart Title="Monthly visitors" Description="Thousands">
    <TwLineChart Categories="@_months" Series="@_visitors" />
</TwChart>

CSHARP

@code {
    private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
    
    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])
    ];
}

Spline

Set Curve to ChartCurve.Smooth for a smooth curve through the points. The curve never overshoots the data, so it cannot suggest a peak that is not there.

Monthly visitors

RAZOR

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

Step line

ChartCurve.Step holds each value until the next one, which suits values that change at discrete moments such as a price or a stock level.

Plan price

RAZOR

<TwChart Title="Plan price">
    <TwLineChart Categories="@_months" Series="@_price" Curve="ChartCurve.Step" ValueFormat="C0" />
</TwChart>

CSHARP

@code {
    private readonly ChartSeries[] _price = [new("Price", [20, 20, 25, 25, 25, 30])];
}

Markers

A dot is drawn at each point when there are twelve categories or fewer. Set ShowMarkers to force them on or off.

Monthly visitors

RAZOR

<TwChart Title="Monthly visitors">
    <TwLineChart Categories="@_months" Series="@_visitors" ShowMarkers="false" />
</TwChart>

Missing values

A null value breaks the line instead of dropping to zero, so a gap in the data looks like a gap.

Sensor readings

RAZOR

<TwChart Title="Sensor readings">
    <TwLineChart Categories="@_months" Series="@_readings" />
</TwChart>

CSHARP

@code {
    private readonly ChartSeries[] _readings = [new("Temperature", [18, 21, null, null, 24, 22])];
}

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.

TwLineChart

Basic usage

Spline

Step line

Markers

Missing values

Summary

Shared features

Keyboard navigation