# Funnel Chart

Visualize conversion and pipeline stages with a Blazor funnel chart as each stage narrows.

Keywords: chart, graph, funnel, conversion, pipeline, sales

> API reference: [RadzenChart API](https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenChart.md)

## Examples

## Radzen Blazor Funnel Chart

A funnel chart shows how a quantity narrows as it moves through the stages of a process - the classic view for conversion and sales pipelines, where each stage holds fewer than the last.

```razor
<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value="inverted" Name="inverted" />
                <RadzenLabel Text="Inverted" Component="inverted" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenLabel Text="Fill" Component="fillMode" />
                <RadzenSelectBar @bind-Value="@fillMode" TValue="FillMode" Size="ButtonSize.Small" Name="fillMode">
                    <Items>
                        <RadzenSelectBarItem Value="FillMode.Gradient" Text="Gradient" />
                        <RadzenSelectBarItem Value="FillMode.Solid" Text="Solid" />
                        <RadzenSelectBarItem Value="FillMode.None" Text="None" />
                    </Items>
                </RadzenSelectBar>
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>

    <RadzenChart Animate="true" Style="width: 100%; height: 400px;">
    <RadzenFunnelSeries Data="@stages" CategoryProperty="Stage" ValueProperty="Count" Inverted="@inverted" FillMode="@fillMode"
                        StrokeWidth="1" Strokes="@(new[] { "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)", "var(--rz-base-background-color)" })">
        <RadzenSeriesDataLabels Visible="true" />
    </RadzenFunnelSeries>
    <RadzenLegend Position="LegendPosition.Right" />
    </RadzenChart>
</RadzenStack>

@code {
    bool inverted;
    FillMode fillMode = FillMode.Gradient;

    class FunnelData
    {
        public string Stage { get; set; }
        public double Count { get; set; }
    }

    FunnelData[] stages = new[]
    {
        new FunnelData { Stage = "Visitors", Count = 5000 },
        new FunnelData { Stage = "Leads", Count = 3200 },
        new FunnelData { Stage = "Prospects", Count = 1800 },
        new FunnelData { Stage = "Negotiations", Count = 900 },
        new FunnelData { Stage = "Closed Deals", Count = 450 },
    };
}
```