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.

QueryFunnelChart

import { QueryFunnelChart } from '@latitude-data/react';

function MyComponent() {
  return (
    <QueryFunnelChart
      queryPath='seasons_per_title'
      params={{
        start_year: 2010,
        end_year: 2020
      }}
      sort='descending'
      orientation='horizontal'
    />
  );
}

Properties

Depending on the component you choose, you can pass the following properties:

QueryFunnelChart

Query configuration

queryPath · string · required

The path to the query file that will provide the data displayed in the table.

params · object

An object with custom parameters to be used in the query.

download · boolean

A flag to enable the download of the table data as a CSV file.

Style

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.