The Funnel Chart component shows your data moving through a number of stages in a process. The data is displayed either as one value for each stage of the process, or as a conversion percentage, or both. This component is ideal for Marketing and Sales data, such as lead sales to conversion, or any other value that can be broken down categorically and compared to the big picture. Here is an example of a funnel chart.
For a quick introduction to building a funnel chart, watch this short video:
This article includes:
The Component Tree
Here is the structure of the funnel chart component. This area of the Klip Editor is called the Component Tree. When building your funnel chart, you will select elements in the Component Tree to, for example, assign values to and name your Klip.
How do I build a funnel chart?
The following procedure tells you how to build a funnel chart. You can apply additional customization by exploring the options in the Properties panel.
You can also build a funnel chart within a Table component. Click here to learn how.
To build a funnel chart you will need to select data for both the Values and Labels sub-components.
Note: You can use ARRAY to display data from two data sources.
To build a funnel chart:
- From your dashboard, click + Add a Klip > Build a Custom Klip, or, from the Klips page, click Build a Custom Klip.
- Click and drag the Funnel Chart component into your Klip preview workspace.
- Click + Add Data Source and select a data source to use.
- Assign data to your values by clicking the Values subcomponent and selecting the appropriate column from the Data tab.
Note: If you are using JSON or XML data instead of tabular data, you must locate and select the appropriate element from the hierarchy. Learn more about JSON and XML data here. - Click the Labels subcomponent and select the appropriate column from the Data panel to assign labels.
- To change the title that displays on your Klip, click the Klip component in the component tree and, at Klip Title, enter your new title in the field.
- To change the name of your Klip (which displays in your list of Klips), click Untitled in the upper-left corner of the screen and enter your text in that field.
- Click Save.
How do I customize a funnel chart?
When building a funnel chart, you have several customization options including:
- Displaying conversion rates as percentages
- Applying different colors
- Adjusting chart height and label font size
Displaying conversion rates as a percentage
When setting your labels, you can include a conversion option to show you a percentage based on either the first stage or the previous stage of the process.
You can select one of three Conversion options:
- Don't show.
- As a % of the first stage.
- As a % of the previous stage.
If you select the conversion option As a % of the first stage all stages are calculated on the first stage of the process. For example,
- the first stage displays as 100%
- the second stage displays as a percentage of the first stage
- the third stage displays as a percentage of the second stage
- and so on
To display Conversion percentages:
- Select Funnel Chart in the component tree.
- In the Properties Panel, at Labels, uncheck Show values.
- From the Conversion drop-down, select your conversion option.
Applying different colors
You can highlight the different stages of the process by assigning each stage a different color.
- Select the Funnel Chart component from the Component Tree.
- From the Properties panel, at Stage Colors, select Override the default colors.
- Select the color you want to change and choose a new color from the pop-up.
- Optionally, use the + and - buttons to add or remove colors.
- When you’re done with your Klip, click Save and Exit.
Adjusting chart height and label font size
To adjust the chart height and label font size:
- Select Funnel Chart in the component tree.
- In the Properties Panel, at Chart Height, use the drop-down to select a chart height.
- At Label Size, use the drop-down to select a font size for the labels.
- Click Save.