Examples
Data holds the stages as ChartDataPoint values, first to last; the right side shows each value and the share kept from the stage before.
Shape="FunnelShape.Pyramid" cuts a triangle into slices whose heights follow the values, first stage at the base. Color="@null" gives each stage its own palette colour.
Shape="FunnelShape.Rectangle" draws each stage as a centred rectangle as wide as its value, with no slanted sides.
Playground
<FunnelChart
ValueFormat="{0:N0}"
Title="Trial to paid, last 30 days"
Data="@_stages" />
@code {
private readonly ChartDataPoint[] _stages =
[
new("Pricing page", 8_400),
new("Started trial", 2_150),
new("Activated", 1_320),
new("Invited team", 760),
new("Paid", 410),
];
}API
<FunnelChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Color string= "var(--color-primary)"
Colour of every stage that has no Color of its own. When null, stages cycle through the theme palette.
- Data IReadOnlyList<
ChartDataPoint> = []The stages, first (widest) to last. Points without a finite, non-negative Value are skipped.
- FirstFormat string= "{0} of first"
Format string for a stage's share of the first stage in its tooltip; {0} is the percentage.
- Gap double= 4
Gap between stages, in chart units.
- PreviousFormat string= "{0} of previous"
Format string for a stage's conversion from the stage before, under its value and in its tooltip; {0} is the percentage.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- Shape FunnelShape= FunnelShape.Funnel
Funnel (equal-height stages narrowing top to bottom), Pyramid (a triangle sliced by value, first stage at the base) or Rectangle (equal-height centred rectangles as wide as their value).
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for stage values, e.g. "{0:N0} accounts".
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.