Charts

TwHorizonChart

TwHorizonChart is a Blazor horizon chart that folds each series into a compact row of layered bands, fitting many series into little height.

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

TwHorizonChart gives each series its own short row. Values are cut into bands and the bands are layered, so a strong value shows as a darker color instead of a taller mark. Series are named on the axis.

Requests by serviceThousands per hour

RAZOR

<TwChart Title="Requests by service" Description="Thousands per hour">
    <TwHorizonChart Categories="@_hours" Series="@_services" />
</TwChart>

CSHARP

@code {
    private readonly string[] _hours = ["00", "02", "04", "06", "08", "10", "12", "14", "16", "18", "20", "22"];
    
    private readonly ChartSeries[] _services =
    [
        new("API", [12, 8, 6, 14, 38, 52, 47, 55, 49, 36, 24, 15]),
        new("Web", [9, 5, 4, 11, 26, 31, 35, 33, 30, 28, 21, 12]),
        new("Search", [3, 2, 1, 4, 12, 19, 22, 18, 15, 11, 8, 4]),
        new("Reports", [1, 1, 22, 18, 3, 2, 2, 3, 2, 1, 1, 1])
    ];
}

Bands

BandCount sets how many bands the values are cut into, from 1 to 6. More bands show finer differences in the same height but are harder to tell apart; three is a good default.

Requests by serviceFive bands

RAZOR

<TwChart Title="Requests by service" Description="Five bands">
    <TwHorizonChart Categories="@_hours" Series="@_services" BandCount="5" CategoryHeader="Hour" />
</TwChart>

Above and below zero

Negative values are drawn in the color for an unfavourable change, growing from the same baseline, so a row shows at a glance when a series was up and when it was down.

Change in sales against last yearPercent, by week

RAZOR

<TwChart Title="Change in sales against last year" Description="Percent, by week">
    <TwHorizonChart Categories="@_weeks" Series="@_regions" ValueFormat="+0.0;-0.0" Height="ChartHeight.Small" />
</TwChart>

CSHARP

@code {
    private readonly string[] _weeks = ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8"];
    
    private readonly ChartSeries[] _regions =
    [
        new("North", [2.1, 3.4, 1.2, -0.8, -2.6, -1.1, 1.9, 4.2]),
        new("South", [-1.4, -2.2, -3.1, -1.9, 0.6, 2.4, 3.3, 2.8]),
        new("West", [0.4, 0.9, 1.6, 2.2, 2.9, 1.4, -0.3, -1.7])
    ];
}

When to use

Use a horizon chart to fit many series into little height. Every row shares one scale, so the same darkness means the same magnitude in each. For a few series, TwLineChart is easier to read.

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.

TwHorizonChart

Basic usage

Bands

Above and below zero

When to use

Summary

Shared features

Keyboard navigation