Funnel

Funnel chart

Funnel chart uses runnable data and options to demonstrate length funnel; neck configuration.

StatusLoading

funnel
length funnel
neck configuration

Graflume.funnel() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Funnel chart · Row data
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Funnel chart uses runnable data and options to demonstrate length funnel; neck configuration.

Browser API · Portable schema

Browser API

Graflume.funnel()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "default"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel chart uses runnable data and options to demonstrate length funnel; neck configuration.",
    "text": "Funnel"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

Graflume.funnel('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "default"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel chart uses runnable data and options to demonstrate length funnel; neck configuration.",
    "text": "Funnel"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Funnel area chart

Funnel area chart uses runnable data and options to demonstrate area-proportional funnel; outside label solver.

StatusLoading

funnel-area
area-proportional funnel
outside label solver

Graflume.funnelArea() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Funnel area chart · Row data
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Funnel area chart uses runnable data and options to demonstrate area-proportional funnel; outside label solver.

Browser API · Portable schema

Browser API

Graflume.funnelArea()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Funnel area chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Funnel area chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "area"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel area chart uses runnable data and options to demonstrate area-proportional funnel; outside label solver.",
    "text": "Funnel · Funnel area chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

Graflume.funnelArea('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Funnel area chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Funnel area chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "mode": "area"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Funnel area chart uses runnable data and options to demonstrate area-proportional funnel; outside label solver.",
    "text": "Funnel · Funnel area chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Depth funnel chart

Depth funnel chart uses runnable data and options to demonstrate pyramid and depth-styled variants.

StatusLoading

funnel-3d
pyramid and depth-styled variants

Graflume.funnel3d() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Depth funnel chart · Row data
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Depth funnel chart uses runnable data and options to demonstrate pyramid and depth-styled variants.

Browser API · Portable schema

Browser API

Graflume.funnel3d()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Depth funnel chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Depth funnel chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "funnel-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth funnel chart uses runnable data and options to demonstrate pyramid and depth-styled variants.",
    "text": "Funnel · Depth funnel chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

Graflume.funnel3d('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Depth funnel chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Depth funnel chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "funnel-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth funnel chart uses runnable data and options to demonstrate pyramid and depth-styled variants.",
    "text": "Funnel · Depth funnel chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Pyramid chart

Pyramid chart uses runnable data and options to demonstrate sorting and value labels.

StatusLoading

pyramid
sorting and value labels

Graflume.pyramid() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Pyramid chart · Row data
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Pyramid chart uses runnable data and options to demonstrate sorting and value labels.

Browser API · Portable schema

Browser API

Graflume.pyramid()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Pyramid chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "pyramid"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pyramid chart uses runnable data and options to demonstrate sorting and value labels.",
    "text": "Funnel · Pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

Graflume.pyramid('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Pyramid chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "pyramid"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Pyramid chart uses runnable data and options to demonstrate sorting and value labels.",
    "text": "Funnel · Pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Depth pyramid chart

Depth pyramid chart uses runnable data and options to demonstrate conversion/dropoff/cumulative semantics.

StatusLoading

pyramid-3d
conversion/dropoff/cumulative semantics

Graflume.pyramid3d() Canvas 2D

Control help

Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.

Use Tab to reach a control and Enter or Space to activate it. With the chart focused, use plus and minus to zoom and arrow keys to pan.

Auto placement compares perimeter candidates and avoids the plot, legend, and other callouts when possible. Explicit placement is preserved with only necessary safety correction. Callout text wraps safely inside the bubble. Long unbroken tokens are visually shortened within the line budget, while the complete source text remains available to assistive technology.

Loading

Depth pyramid chart · Row data
`category`ordinal	`value`quantitative
Visited	12000
Explored a chart	8450
Created a view	5120
Shared with a team	2940
Returned in 30 days	1860

Depth pyramid chart uses runnable data and options to demonstrate conversion/dropoff/cumulative semantics.

Browser API · Portable schema

Browser API

Graflume.pyramid3d()

const data = [
  {
    "category": "Visited",
    "value": 12000
  },
  {
    "category": "Explored a chart",
    "value": 8450
  },
  {
    "category": "Created a view",
    "value": 5120
  },
  {
    "category": "Shared with a team",
    "value": 2940
  },
  {
    "category": "Returned in 30 days",
    "value": 1860
  }
];

const options = {
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Depth pyramid chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Depth pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "pyramid-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth pyramid chart uses runnable data and options to demonstrate conversion/dropoff/cumulative semantics.",
    "text": "Funnel · Depth pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
};

Graflume.pyramid3d('#chart', data, options);

Portable schema

ChartSpec 0.1 · options

{
  "accessibility": {
    "description": "Zoom and pan inspect the rendered surface without changing data axes or values. When playback controls are available, they move through real steps in the order each unique value first appears in the source data.",
    "label": "Funnel · Depth pyramid chart example"
  },
  "axes": {
    "x": false,
    "y": false
  },
  "height": 620,
  "interaction": {
    "controls": {
      "annotations": false,
      "export": true,
      "fullscreen": true,
      "labels": {
        "controls": "Chart controls",
        "enterFullscreen": "Enter fullscreen",
        "exitFullscreen": "Exit fullscreen",
        "exportPng": "Download PNG",
        "hideAnnotations": "Hide callouts",
        "loop": "Loop playback",
        "nextFrame": "Next frame",
        "pause": "Pause",
        "play": "Play",
        "previousFrame": "Previous frame",
        "reset": "Reset view",
        "seek": "Playback position",
        "showAnnotations": "Show callouts",
        "speed": "Playback speed",
        "zoomIn": "Zoom in",
        "zoomOut": "Zoom out"
      },
      "playback": false,
      "reset": true,
      "zoom": true
    },
    "hover": true,
    "navigation": {
      "drag": true,
      "keyboard": true,
      "maxZoom": 6,
      "minZoom": 1,
      "pinch": true,
      "wheel": "modifier"
    },
    "tooltip": {
      "fields": [
        {
          "field": "category",
          "format": "auto",
          "label": "Category"
        },
        {
          "field": "value",
          "format": "number",
          "label": "Value"
        }
      ],
      "title": "Funnel · Depth pyramid chart",
      "trigger": "mark"
    }
  },
  "locale": "en",
  "mark": {
    "options": {
      "variant": "pyramid-3d"
    }
  },
  "padding": {
    "top": 52
  },
  "theme": "graflume-light",
  "title": {
    "subtitle": "Depth pyramid chart uses runnable data and options to demonstrate conversion/dropoff/cumulative semantics.",
    "text": "Funnel · Depth pyramid chart"
  },
  "width": "container",
  "x": {
    "field": "category",
    "title": "Journey stage",
    "type": "ordinal"
  },
  "y": {
    "field": "value",
    "title": "Teams",
    "type": "quantitative"
  }
}

Funnel · Chart-specific features

Every executable mode in this family

Funnel chart

Funnel chart · Row data

Graflume.funnel()

ChartSpec 0.1 · options

Funnel area chart

Funnel area chart · Row data

Graflume.funnelArea()

ChartSpec 0.1 · options

Depth funnel chart

Depth funnel chart · Row data

Graflume.funnel3d()

ChartSpec 0.1 · options

Pyramid chart

Pyramid chart · Row data

Graflume.pyramid()

ChartSpec 0.1 · options

Depth pyramid chart

Depth pyramid chart · Row data

Graflume.pyramid3d()

ChartSpec 0.1 · options

Modes · compatibility identifiers

Integration checklist

Accessibility

Performance

ID	Name	Quick API	mode	mark	renderer
`funnel`	Funnel chart	`funnel()`	`default`	`funnel`	`canvas`
`funnel-area`	Funnel area chart	`funnelArea()`	`area`	`funnel`	`canvas`
`funnel-3d`	Depth funnel chart	`funnel3d()`	`funnel-3d`	`pyramid`	`canvas`
`pyramid`	Pyramid chart	`pyramid()`	`pyramid`	`pyramid`	`canvas`
`pyramid-3d`	Depth pyramid chart	`pyramid3d()`	`pyramid-3d`	`pyramid`	`canvas`

Identifier	Canonical mode ID
`funnel`	`funnel`
`funnel3d`	`funnel-3d`
`pyramid`	`pyramid`
`pyramid3d`	`pyramid-3d`