Charts

TwSlopeChart

TwSlopeChart is a Blazor slope chart: a labelled line per series between two points in time, showing the direction and size of each change.

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

TwSlopeChart draws a straight line per series between two points in time and labels both ends, so the direction and size of each change is read from the slope. Use two categories for the classic form.

Market sharePercent

RAZOR

<TwChart Title="Market share" Description="Percent">
    <TwSlopeChart Categories="@_years" Series="@_share" />
</TwChart>

CSHARP

@code {
    private readonly string[] _years = ["2020", "2025"];
    
    private readonly ChartSeries[] _share =
    [
        new("Aster", [34, 41]),
        new("Birch", [28, 19]),
        new("Cedar", [15, 26])
    ];
}

More than two points

Extra categories add intermediate points. The first is labelled with the series name and value, and the last with its value.

Market share

RAZOR

<TwChart Title="Market share">
    <TwSlopeChart Categories="@_threeYears" Series="@_shareByYear" />
</TwChart>

CSHARP

@code {
    private readonly string[] _threeYears = ["2015", "2020", "2025"];
    
    private readonly ChartSeries[] _shareByYear =
    [
        new("Aster", [22, 34, 41]),
        new("Birch", [37, 28, 19]),
        new("Cedar", [9, 15, 26])
    ];
}

Formatting

ValueFormat applies to the end labels as well as the tooltips and table view.

Market share

RAZOR

<TwChart Title="Market share">
    <TwSlopeChart Categories="@_years" Series="@_share" ValueFormat="0\%" />
</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.

TwSlopeChart

Basic usage

More than two points

Formatting

Summary

Shared features

Keyboard navigation