Powered by AppSignal & Oban Pro

Stacked Funnel

17_stacked_funnel.livemd

Stacked Funnel

Mix.install([
  {:plotly_ex, "~> 0.3"},
  {:kino, "~> 0.18"}
])

Section

layout.funnelmode: "stack" stacks multiple Funnel traces side-by-side at each stage. Each trace can use a different textinfo and textposition. Stages with more traces than others simply have fewer bars — missing stages are skipped gracefully.

alias Plotly.{Figure, Funnel}

Figure.new()
|> Figure.add_trace(
  Funnel.new(
    name: "Montreal",
    y: ["Website visit", "Downloads", "Potential customers", "Requested price"],
    x: [120, 60, 30, 20],
    textinfo: "value+percent initial"
  )
)
|> Figure.add_trace(
  Funnel.new(
    name: "Toronto",
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "Invoice sent"],
    x: [100, 60, 40, 30, 20],
    textposition: "inside",
    textinfo: "value+percent previous"
  )
)
|> Figure.add_trace(
  Funnel.new(
    name: "Vancouver",
    y: ["Website visit", "Downloads", "Potential customers", "Requested price", "Invoice sent", "Closed deals"],
    x: [90, 70, 50, 30, 10, 5],
    textposition: "outside",
    textinfo: "value+percent total"
  )
)
|> Figure.update_layout(
  title: "Multi-City Sales Funnel",
  margin: %{l: 130, r: 0},
  width: 600,
  funnelmode: "stack",
  showlegend: true
)
|> Plotly.show()