​
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.

valueslabels
245Pending
120In Progress
32Closed

​
Syntax

You can use <FunnelChart ... /> to add it to your view. Within the tag you must add the properties to configure the chart.

<FunnelChart
	query='orders_evolution'
  sort='descending'
  showColorGradient={false}
  showLabels={true}
/>

​
Properties

To configure and customize the chart, you can add properties, some of which are required and some of which are optional.

​
query
string
required

The name of your .sql file from which your chart will get the data. It’s not necessary to specify the full path, just the name, because we will search all folders until we find it

​
height
number

Specifies the height of the chart in px. You must enclose the number in brackets like height={720}. The default value is 400px.

​
width
number

Specifies the width of the chart in px. You must enclose the number in brackets like width={480}. By default it takes the 100% or the available width.

​
sort
string
required

The order in which the data will be displayed. It can be ascending or descending. Default descending.

​
orientation
string
required

The orientation of the chart. It can be vertical or horizontal. Default vertical.

​
showColorGradient
boolean

Whether the color of each layer is a gradient or whether each layer is a different color.

​
animation
boolean

Specifies whether or not to show an animation when the page loads.

​
showLabels
boolean

Display the category name directly on the chart.

​
showLegend
boolean

Display the color legend for each series displayed.

​
showDecal
boolean

Add a visual pattern to each series to help colorblind people distinguish them.

​
Reactive To Params

Within the opts property we can include some options to modify the behavior of the chart. At the moment only the reactToParams option is available.

​
reactToParams
boolean

If true, the chart will react to any change in the params to update the data displayed without the need to run the view manually.

<FunnelChart
	query='orders_evolution'
    opts={{
        reactToParams: true
    }}
/>