Skip to content
commit-766c8d6756a1

Interactive funnel

Named values across a short ordered sequence, emphasizing stage shape and relative magnitude.

Purpose
Show named values across a short sequence as progressively shaped stages.
Use when
Use when stage order and broad relative magnitude matter more than precise comparison.
Avoid when
Avoid when values must only decrease, paths branch, close values require comparison, or rates are the primary task; use a bar, Sankey, or explicit table instead.
Equivalent data
Every example preserves series, stage, value, and intended order in an adjacent exact-value table.
Exact funnel values
SeriesStageValue
AnalyticsVisit31
AnalyticsAdd37
AnalyticsOrder47
AnalyticsPayment9
AnalyticsDeal31
Usage Example
@interactivefunnel.Funnel(interactivefunnel.Config{
  Label: "Basic five-stage funnel",
  Series: []interactivefunnel.Series{{
    Name: "Analytics",
    Data: []interactivefunnel.Data{
      {Name: "Visit", Value: 31},
      {Name: "Add", Value: 37},
      {Name: "Order", Value: 47},
      {Name: "Payment", Value: 9},
      {Name: "Deal", Value: 31},
    },
  }},
  Options: chart.ChartOptions{
    Title: &chart.TitleOptions{Text: "basic funnel example"},
  },
})

Visible labels on the left

The same upstream helper supplies a second deterministic value group. Labels remain visible to the left without changing series, stage order, or exact-data access.

Exact funnel values
SeriesStageValue
AnalyticsVisit18
AnalyticsAdd25
AnalyticsOrder40
AnalyticsPayment6
AnalyticsDeal0
Visible labels on the left
@interactivefunnel.Funnel(interactivefunnel.Config{
  Label: "Funnel with left labels",
  Series: []interactivefunnel.Series{{
    Name: "Analytics",
    Data: []interactivefunnel.Data{
      {Name: "Visit", Value: 18},
      {Name: "Add", Value: 25},
      {Name: "Order", Value: 40},
      {Name: "Payment", Value: 6},
      {Name: "Deal", Value: 0},
    },
  }},
  SeriesOptions: chart.SeriesOptions{
    Label: &chart.LabelOptions{
      Show:     chart.Bool(true),
      Position: "left",
    },
  },
})

Stage meaning

A funnel does not prove conversion or enforce decreasing values. The upstream default sorts geometry by descending value; set OrderData when process order matters, and use the exact table for values and source order.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/funnel

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API