Funnel Chart

Renders a conversion funnel with progressively narrowing trapezoid stages. Each stage’s width is proportional to its value.

Basic Usage

<ArcadiaFunnelChart TItem="FunnelStage" Data="@data"
                  NameField="@(d => d.Stage)" ValueField="@(d => d.Count)"
                  Height="400" Width="500" Title="Conversion Funnel" />

@code {
    record FunnelStage(string Stage, double Count);

    List<FunnelStage> data = new()
    {
        new("Visitors", 10000),
        new("Signups", 4200),
        new("Trials", 1800),
        new("Paid", 720),
        new("Enterprise", 180),
    };
}

Parameters

Parameter	Type	Default	Description
`NameField`	`Func<T, string>`	required	Extracts the stage name from each item
`ValueField`	`Func<T, double>`	required	Extracts the numeric value from each item
`StageOpacity`	`double`	0.85	Opacity for each funnel stage shape
`StageLabelColor`	`string`	white	Fill color for the stage name label text

Plus all shared ChartBase parameters.

Events

Event	Type	Description
`OnPointClick`	`EventCallback<PointClickEventArgs<T>>`	Fired when a stage is clicked
`OnSeriesClick`	`EventCallback<int>`	Fired when a series is clicked

Features

Automatic width scaling relative to the maximum value
Hover tooltips with stage name and value
On-load animation (stages grow in sequence)
PNG/SVG export via toolbar (hover top-right)
Screen reader accessible data table