Funnel chart

Ordered stages whose non-increasing values narrow from the first stage to the last.

Purpose: Show progressive reduction through a small ordered sequence of stages.
Use when: Use for a fixed process such as conversion or completion, where each stage follows the previous one.
Avoid when: Avoid when stages can increase, branch, recur, or lack a single meaningful order.
Equivalent data: The adjacent disclosure preserves every stage value and its share of the first stage; width and color are not the only source of meaning.

Seven ordered stages, with every exact value available below the chart.

Exact stage values

Stage	Value	Share of first stage
Show	100	100%
Click	80	80%
Visit	60	60%
Inquiry	40	40%
Order	20	20%
Pay	10	10%
Cancel	2	2%

Usage Example

@funnel.Funnel(funnel.Config{
  Label: "Basic funnel",
  Title: "Funnel",
  Stages: []funnel.Stage{
    {Label: "Show", Value: 100},
    {Label: "Click", Value: 80},
    {Label: "Visit", Value: 60},
    {Label: "Inquiry", Value: 40},
    {Label: "Order", Value: 20},
    {Label: "Pay", Value: 10},
    {Label: "Cancel", Value: 2},
  },
  Options: funnel.Options{
    Legend: funnel.Legend{Padding: funnel.Padding{Left: 100}},
  },
})

Compact five-stage sequence

The same component accepts a shorter ordered sequence while preserving every exact value beside the geometry.

Five ordered stages retain the supplementary source sequence and exact values.

Exact stage values

Stage	Value	Share of first stage
Show	100	100%
Click	80	80%
Visit	60	60%
Inquiry	40	40%
Order	20	20%

Compact five-stage sequence

@funnel.Funnel(funnel.Config{
  Label: "Compact five-stage funnel",
  Title: "Funnel",
  Stages: []funnel.Stage{
    {Label: "Show", Value: 100},
    {Label: "Click", Value: 80},
    {Label: "Visit", Value: 60},
    {Label: "Inquiry", Value: 40},
    {Label: "Order", Value: 20},
  },
})

Static/vector behavior

Funnel renders inline SVG on the server, follows Goshtoso chart tokens in light and dark mode, remains useful in print or without JavaScript, and exports resolved SVG plus opaque PNG through the shared wrapper. Use the exact table for comparisons that cannot be judged from narrowing geometry; shared chart controls and chart modes guides document lifecycle and delivery choices.

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