Charts

TwSmallMultiplesChart

TwSmallMultiplesChart is a Blazor small multiples chart: one small panel per series on a shared scale, for comparing many series clearly.

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

TwSmallMultiplesChart repeats one simple chart per series, all on one shared scale so the panels can be compared at a glance. Reach for it when a single plot would hold too many series to tell apart.

Monthly visitors by channelThousands

RAZOR

<TwChart Title="Monthly visitors by channel" Description="Thousands">
    <TwSmallMultiplesChart 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])
    ];
}

Kind

Kind picks the mark drawn in each panel: SmallMultipleKind.Column (the default), Line or Area.

Monthly visitors by channel

RAZOR

<TwChart Title="Monthly visitors by channel">
    <TwSmallMultiplesChart Categories="@_months" Series="@_visitors" Kind="SmallMultipleKind.Line" />
</TwChart>

Monthly visitors by channel

RAZOR

<TwChart Title="Monthly visitors by channel">
    <TwSmallMultiplesChart Categories="@_months" Series="@_visitors" Kind="SmallMultipleKind.Area" />
</TwChart>

Columns

Up to three panels share a row. Set Columns to change that, and Height to give several rows more room.

Monthly visitors by channel

RAZOR

<TwChart Title="Monthly visitors by channel">
    <TwSmallMultiplesChart Categories="@_months" Series="@_visitors" Columns="1" Height="ChartHeight.Large" />
</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.

TwSmallMultiplesChart

Basic usage

Kind

Columns

Summary

Shared features

Keyboard navigation