Funnel Chart
How to create and configure the Funnel chart
Introduction
The Funnel chart visualizes sequential stages in a process, showing decreasing quantities through segments. It’s key for tracking conversion rates, identifying potential bottlenecks, and optimizing process flows.
Preparation
The query .sql file that the Funnel chart accepts must contain only 2 columns, one for the labels and another one for the values.
| labels | values |
|---|---|
| 1 Seasons | 1221 |
| 2 Seasons | 389 |
| 3 Seasons | 187 |
| 4 Seasons | 120 |
| 5 Seasons | 79 |
Syntax
You can use either FunnelChart or QueryFunnelChart to visualize query results in a chart.
Use QueryFunnelChart when you want the component to automatically handle the query fetching.
Use FunnelChart when you already fetched the data using useQuery.
Properties
Depending on the component you choose, you can pass the following properties:
Query configuration
The path to the query file that will provide the data displayed in the table.
An object with custom parameters to be used in the query.
A flag to enable the download of the table data as a CSV file.
Style
Whether the color of each layer is a gradient or whether each layer is a different color.
Specifies whether or not to show an animation when the page loads.
Display the category name directly on the chart.
Display the color legend for each series displayed.
Add a visual pattern to each series to help colorblind people distinguish them.