Charts

TwFunnelChart

TwFunnelChart is a Blazor funnel chart showing how much remains at each stage of a process. Invert it to draw a pyramid chart.

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

TwFunnelChart stacks the stages of a process, each as wide as its value, so the drop between stages is visible. Tooltips give each stage as a share of the first. The stages are an ordered sequence, so they share one hue that fades from first to last.

Checkout funnel

RAZOR

<TwChart Title="Checkout funnel">
    <TwFunnelChart Data="@_funnel" LabelHeader="Stage" ValueHeader="Visitors" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _funnel =
    [
        new("Visited", 12000),
        new("Added to basket", 5400),
        new("Started checkout", 3100),
        new("Paid", 2200)
    ];
}

Pyramid

Set Inverted to draw the stages from the bottom up, which turns the funnel into a pyramid.

Support tiers

RAZOR

<TwChart Title="Support tiers">
    <TwFunnelChart Data="@_tiers" Inverted="true" LabelHeader="Tier" ValueHeader="Tickets" />
</TwChart>

CSHARP

@code {
    private readonly ChartValue[] _tiers =
    [
        new("Self service", 900),
        new("Front line", 520),
        new("Specialists", 210),
        new("Engineering", 60)
    ];
}

Labels

ShareLabel renames the share of the first stage in tooltips.

Checkout funnel

RAZOR

<TwChart Title="Checkout funnel">
    <TwFunnelChart Data="@_funnel" ShareLabel="Conversion" Height="ChartHeight.Small" />
</TwChart>

Summary

Tooltips and the table view give the value of each stage. Tooltips also give its share of the first stage.

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.

TwFunnelChart

Basic usage

Pyramid

Labels

Summary

Shared features

Keyboard navigation