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.

Default Rendered example

Five deterministic values preserve the upstream source sequence in the exact table and [0,50) value domain; the chart keeps the upstream default descending-by-value order.

Exact funnel values

Series	Stage	Value
Analytics	Visit	31
Analytics	Add	37
Analytics	Order	47
Analytics	Payment	9
Analytics	Deal	31

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.

Visible labels on the left Rendered example

Every stage label remains visible to the left of its shape; the exact table keeps source order while the chart keeps the upstream default descending-by-value order.

Exact funnel values

Series	Stage	Value
Analytics	Visit	18
Analytics	Add	25
Analytics	Order	40
Analytics	Payment	6
Analytics	Deal	0

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