PhiaUi.Components.FunnelChart (phia_ui v0.1.17)

Copy Markdown View Source

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} />

Summary

Functions

funnel_chart(assigns)

Functions

funnel_chart(assigns)

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>.