The funnel visualization lets report creators visualize how a metric changes over events in a sequential process. For example, a funnel chart can effectively visualize the prospect stages in a sales pipeline, engagement with a marketing campaign, or visitor movement through a website.
Funnel charts are often most effective when the first stage in the process is the biggest (such as 100%) and each progressive stage decreases from there. Funnel charts display the value of each category by varying the width of each bar; larger values have wider bars while smaller values have thinner bars.
In this article:Requirements
Funnel charts require the following fields in the Setup tab of the Properties panel:
- Dimension: A dimension whose values provides the labels for each step, or event, in the funnel chart, which lets you see the difference between each event.
- Metric: A metric that measures the events that are contained in the dimension and determines the width and placement of each event in the funnel chart.
- Sort field: A field that will serve as the basis for sorting the events in the funnel chart.
Things to know
There are several things to know about funnel charts in Looker Studio:
- Report creators can sort funnel charts by the set metric in ascending or descending order. This lets report creators display how the metric changes in different ways. If you choose to sort by something other than the metric (a set dimension or a dimension label), the funnel chart can be sorted in alphabetical order, rather than by numerical values.
- Data labels will automatically appear either inside or outside of bars (depending on whether the width of the bar can accommodate the text), even when the Bar label position style option is set to Inside.
-
You can hover your cursor over a bar in a funnel chart to access a tooltip that displays more details about a bar's value.
Funnel chart examples
You can configure funnel charts to display data in several different ways. This section includes examples for the following funnel style options:
These funnel style options are located in the Style tab of the chart's Properties panel.
Smoothed bar
The smoothed bar option displays funnel chart data as smooth-edged bars that connect with one another. The width of each bar varies depending on its value. Larger values have wider bars, and smaller values have thinner bars. Smoothed bar funnels will not necessarily come to a point.
For example, a funnel chart visualizes the dimension Website events and the metric Count of events, to track how many website viewers make purchases. A smoothed bar funnel chart displays the following event names sorted by the Count of events metric in descending order, and the % of previous data label:
- View product (100%)
- Add to cart (63.45%)
- Purchase (44.77%)
- Register for account (13%)
- Cancel order (0.53%)
The top of each bar is the same width as the smallest width of the previous bar, which lets users quickly compare how the values of each event category correspond.
Stepped bar
The stepped bar option displays funnel chart data as stepped bars, where the width of each bar varies depending on its value. Larger values have wider bars, and smaller values have thinner bars.
For example, a funnel chart visualizes the dimension Website events and the metric Count of events to track how many website viewers make purchases. A stepped bar funnel chart displays the following event names sorted by the Count of events metric in descending order, and the % of previous data label:
- View product (100%)
- Add to cart (63.45%)
- Purchase (44.77%)
- Register for account (13%)
- Cancel order (0.53%)
The bar for each event category is displayed cleanly against the preceding bars, which is more representative of the data presented in the funnel chart.
Inverted triangle
The inverted triangle option displays funnel chart data in a more uniform triangular shape with a point at the bottom, where the width and order of each value in the triangle varies depending on its value. Events with higher metric values are displayed in wider sections, at or closer to the base of the triangle.
For example, a funnel chart visualizes the dimension Website events and the metric Count of events to track how many website viewers make purchases. An inverted triangle funnel chart displays the following event names sorted by the Count of events metric in descending order, and the % of previous data label:
- View product (100%)
- Add to cart (63.45%)
- Purchase (44.77%)
- Register for account (13%)
- Cancel order (0.53%)
The funnel data is presented in a more streamlined and uniform shape, which lets users quickly determine the event categories with the highest and lowest counts of events.
Configure the chart
Add a new chart or select an existing chart. Next, use the Properties panel to configure the chart's Setup and Style tab properties.
Set up the chart data
Data source
A data source provides the connection between the component and the underlying dataset.
- To change the chart's data source, click the current data source name.
- To view or edit the data source, click the Edit data source pencil icon
. (You must have at least
viewpermissions to see this icon.) - Click +BLEND DATA to see data from multiple data sources in the same chart. Learn more about data blending.
. (You must have at least Date range dimension
This option appears if your data source has a valid date dimension.
This option does not appear for Google Ads or Google Analytics data sources, as these data sources automatically select a dimension of type date from the data source.
The Date range dimension is used as the basis for limiting the date range of the chart. For example, Date range is the dimension that is used if you set a date range property for the chart or if a viewer of the report uses a date range control to limit the time frame.
This field is optional for funnel charts.
Dimension
Dimensions are data categories. Dimension values (the data that is contained by the dimension) are names, descriptions, or other characteristics of a category.
The dimension provides the labels for the funnel chart bars.
Metric
Metrics measure the things that are contained in dimensions and provide the numeric scale for the chart.
Metrics are aggregations that come from the underlying dataset or that are the result of implicitly or explicitly applying an aggregation function, such as COUNT(), SUM(), or AVG(). The metric itself has no defined set of values, so you can’t group by a metric as you can with a dimension.
Sort
The Sort field lets you choose a dimension by which to sort the bars on the funnel chart, in either Ascending or Descending order.
By default, the field that is set as the Metric will also be the Sort field.
If you choose to sort by a field other than the metric (for example, if you sort by a string type dimension), the funnel chart may be sorted in alphabetical order rather than by numerical values.
Filter
Filters restrict the data that is displayed in the component by including or excluding the values that you specify. Learn more about the filter property.
Filter options
| Filter name | Click an existing filter to edit it. Mouse over the filter name and click X to delete it. |
| +Add a filter | Click this option to create a new filter for the chart. |
Chart interactions
Cross-filtering lets report viewers interact with one chart and apply that interaction as a filter to other charts in the report. When cross-filtering is turned on for a chart, you can filter the report by clicking one or more dimension values in the chart. Learn more about cross-filtering.
Style the chart
The options in the Style tab control the overall presentation and appearance of the chart.
Title
If you select the Show title checkbox, you can add a title and customize its appearance and placement on the chart.
Title options
| Title | Provides a text field where report editors can enter a custom title for the chart. |
|
Title font type |
Sets the font type for the title text. |
| Title font size | Sets the font size for the title text. |
| Font styling options | Applies bold, italic, or underline styling to the title text. |
| Title font color | Sets the font color for the title text. |
| Left | Aligns the chart title to the left side of the chart. |
| Center |
Centers the chart title above or below the chart. |
| Right | Aligns the chart title to the right side of the chart. |
| Top | Positions the chart title at the top of the chart. |
| Bottom | Positions the chart title at the bottom of the chart. |
Funnel chart
The Funnel shape setting in the Funnel chart section lets you choose how to display the funnel chart data. The options include the following:
| Smoothed bar | Displays funnel chart data as smooth-edged bars that connect with one another. The width of each bar varies depending on its value. Larger values have wider bars, and smaller values have thinner bars. Funnels with smoothed bars will not necessarily come to a point. See the smoothed bar example on this page. |
| Stepped bar | Displays funnel chart data as stepped bars, where the width of each bar varies depending on its value. Larger values have wider bars, and smaller values have thinner bars. See the stepped bar example on this page. |
| Inverted triangle |
Displays funnel chart data in a more uniform shape, where the width and order of each value in the triangle varies depending on its value. See the inverted triangle example on this page. |
See the examples section on this page for more details about how each funnel shape is displayed.
Show data labels
When enabled, the Show data labels setting in the Funnel chart section displays the labels for each bar in the funnel chart. Select the checkbox to enable or disable the Show data labels setting.
Data label
This section controls the presentation of data labels for funnel chart bars. To see these options, click the Show data labels checkbox to enable the setting.
| Show data labels as | Sets how labels are displayed. The options are Number or Percentage. | |
| Percentage type |
When the Percentage data label type is selected, you can choose what percentage to display. The options include the following:
|
|
| Show dimension | When enabled, the Show dimension setting in the Data label section displays the dimension value for each bar in the funnel chart. Click the switch to enable or disable the Show dimension setting. | |
| Compact Numbers |
Rounds numbers and displays the unit indicator. For example, 553,939 becomes 553.9K. This option is available only if Show data labels as setting is set to Number. |
|
| Decimal precision |
Sets the number of decimal places that are displayed in metric values. This option is available only if the Show data labels as setting is set to Number. If the Show data labels as setting is set to Percentage, then the decimal precision will always be 2. |
|
| Labels font size | Sets the font size for the label text. | |
| Labels font family | Sets the font type of the label text. | |
| Font styling options | Applies bold or italic styling to the label text. | |
| Bar label position |
Sets the position of labels relative to the bar. The options are Inside or Outside. Bar labels will automatically appear either inside or outside the bar (depending on whether the width of the bar can accommodate the text), even when the Bar label position style option is set to Inside.
|
|
| Labels background |
Sets a background color for the label text. |
|
Color by
These options control the colors of the funnel visualization:
| Single Color |
When this option is selected, the data series is displayed in shades of a single color. Otherwise, the chart is displayed in multiple colors, according to your report theme.
|
| Bar order |
Use the current theme to color the data according to its position in the chart. This option emphasizes the ranking of the data over the identity of the data. You can click each color swatch to specify a color for each swatch position. (The order goes from the top left swatch to the right.) |
| Dimension values |
This option colors each dimension value in the chart with the color that is assigned in the Manage dimension color values menu. This option ensures that your data uses color consistently, regardless of the position of that data in the chart.
|
Bar border color
The Bar border color option in the Color by section lets you change the outline color for the bars in the funnel chart. You can also specify a bar border color for all the charts in your report from the Layout tab of the Themes menu.
Background and border
The following options control the appearance of the chart background container.
| Background | Sets the chart background color. |
| Border Radius | Adds rounded borders to the chart background. When the radius is 0, the background shape has 90° corners. A border radius of 100° produces a circular shape. |
| Opacity | Sets the chart opacity. 100% opacity completely hides objects behind the chart. 0% opacity makes the chart invisible. |
| Border Color | Sets the chart border color. |
| Border Weight | Sets the chart border line thickness. |
| Border Style | Sets the chart border line style. |
| Add border shadow | Adds a shadow to the chart's lower and right borders. |
Chart header
The chart header lets viewers perform various actions on the chart, such as exporting the data, drilling up or down, or sorting the chart. Chart header options are as follows:
| Show on hover (default) | The three-dot More menu appears when users hover their cursor over the chart header. Users can click the three-dot More menu on a chart to access the header options. |
| Always show | The three-dot More menu always appears on the chart header. |
| Do not show | The header options never appear. Note that report viewers can always access the options by right-clicking on the chart. |
| Header font color | Sets the color of the chart header options. |
Related resources