---
title: "Funnel"
description: "Conversion stage flow. What the funnel is for, the data it needs and every option it has."
section: "Widgets"
canonical: "https://banksync.io/docs/widgets/chart-funnel"
specs: ["dashboards"]
operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}]
---

Conversion stage flow. It sits in the **Part-of-whole** group of the widget library.

![Example funnel on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/funnel.e2c7d98f0e34dd13.png)

## When to use it

Use a funnel to show how a count or amount narrows through ordered stages, and how much is lost at each one. For example, track invoices from sent to viewed to paid, or leads through a sales pipeline. Hover or tap a stage to see its share of the previous stage and of the first.

## When to pick something else

- The stages are not a sequence? Use a **Bar chart**.
- The smallest group belongs on top, as in a hierarchy? Use a **Pyramid**.
- Showing where money flows between accounts? Use a **Sankey**.

## The data it needs

Pick these in the **Data** tab of the inspector. BankSync suggests a column for each when your source has an obvious match.

| Field        | Needed | Pick       | Notes |
| ------------ | ------ | ---------- | ----- |
| **Category** | Yes    | a category |       |
| **Value**    | Yes    | a number   |       |

Rows that share a category are combined before drawing: choose **Sum**, **Average**, **Count**, **Min** or **Max** on the value field. See [Binding data](/docs/widgets/binding-data).

## Funnel options

This chart has no options of its own; everything on its **Style** tab is the shared chart styling below.

## Shared chart styling

Every chart also has the shared styling options. These apply to this one:

- [Legend](/docs/widgets/chart-styling#legend): position, layout and which series show.
- [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format.
- [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background).
- [Value labels](/docs/widgets/chart-styling#value-labels) on the marks.
- [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout.
- [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation.
- [Tooltip](/docs/widgets/chart-styling#tooltip) on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering).
- [Colours](/docs/widgets/chart-styling#palette): follow the dashboard palette or pick one for this chart.

## Messy data

- Stages keep the order your rows arrive in, so sort your data by stage first.
- Rows with the same stage are added together. Negative values are left out, and an all-zero result shows "Everything is zero for this period".
- Up to 12 stages are drawn. Extra stages are dropped, not combined, and the last stage's tooltip says how many are hidden.
- A stage that grows (more than the one before) still draws wider; the shape does not force a narrowing.

## On a phone

Each stage gets a band of the widget's height. When a label does not fit inside a stage it moves beside the shape, and very thin stages drop their labels. Keep to about five stages on phones.

## Related charts

- [Pie chart](/docs/widgets/chart-pie): Categorical share
- [Donut chart](/docs/widgets/chart-donut): Pie with center label
- [Treemap](/docs/widgets/chart-treemap): Nested rectangles by value
- [Sunburst](/docs/widgets/chart-sunburst): Hierarchical radial wedges
- [Nightingale](/docs/widgets/chart-nightingale): Radial polar pie
- [Radial bar](/docs/widgets/chart-radial-bar): Polar bar chart
- [Mosaic](/docs/widgets/chart-mosaic): Marimekko tiled cells
- [Waffle](/docs/widgets/chart-waffle): 100-unit grid share
- [Pyramid](/docs/widgets/chart-pyramid): Inverted funnel