# `PhiaUi.Components.FunnelChart`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/data/funnel_chart.ex#L1)

Funnel chart — visualizes stage-by-stage drop-off in a conversion pipeline.

Inspired by Tremor `FunnelChart`, Ant Design funnel, PrimeReact charts.
Uses centered divs (no SVG trapezoids) — simpler and maintainable.

Each stage is a horizontally centered bar whose width is proportional to
its value relative to the first stage. Drop-off percentages are computed
server-side and shown between stages when `show_dropoff: true`.

## Examples

    <.funnel_chart stages={[
      %{label: "Visitors",    value: 10_000},
      %{label: "Leads",       value: 4_200},
      %{label: "Prospects",   value: 1_800},
      %{label: "Conversions", value: 320}
    ]} />

    <.funnel_chart stages={@pipeline} color={:purple} show_dropoff={false} />

# `funnel_chart`

## Attributes

* `stages` (`:list`) (required) - List of maps with `:label` (string) and `:value` (number).
* `color` (`:atom`) - Color palette for the funnel bars. Defaults to `:blue`. Must be one of `:blue`, `:green`, `:purple`, `:orange`, or `:rose`.
* `show_dropoff` (`:boolean`) - When `true`, shows drop-off % annotations. Defaults to `true`.
* `id` (`:string`) - Unique ID for the chart (auto-generated if not provided). Defaults to `nil`.
* `title` (`:string`) - Chart title rendered above the visualization. Defaults to `nil`.
* `description` (`:string`) - Chart description for context (rendered below title). Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*