Funnel Chart

WordCloud

Heatmap

Introduction

A funnel chart is a visualization that resembles a funnel, primarily used to show conversion efficiency across stages in a business process. Its characteristics include:

Narrow-down shape: The top represents the initial stage (e.g., potential users), the bottom represents the final stage (e.g., converted customers), with each stage's width proportional to its value.

Process flow display: Stages are arranged in business logic order (e.g., "Exposure → Click → Inquiry → Order"), intuitively showing loss and retention at each step.

Data annotation: Each stage is usually annotated with specific values and conversion rates (e.g., "Clicks 1000, conversion rate 20%"), facilitating quantitative analysis.

Configuration

Overview

Configuration	Description	Type	Default
data	Data	Array	[]
xField	X-axis field	string	-
yField	Y-axis field	string \| string[]	-
shapeField	Stage shape	`funnel` \| `pyramid`	funnel
compareField	Comparison field. When this field is declared, it will automatically render as a comparison funnel chart	string	-
isTransposed	Whether the funnel chart layout is transposed	boolean	false
title	Used to specify chart title content, see Title	object (optional)	-
legend	Auxiliary element of the chart, uses color, size, shape to distinguish different data types, used for filtering data in the chart, see Legend	object (optional)	-
label	Data labels are one of the means to add annotations to the chart, see Label	object (optional)	-
tooltip	Used to dynamically display detailed information of data points, see Tooltip	object (optional)	-
style	Visual style, configuration details see Drawing Properties	object (optional)	-
theme	Used to control the overall appearance of the chart, including visual properties such as colors, fonts, margins, see Theme	string \| object (optional)	`light`
onReady	Chart load callback, used for subsequent event binding	Function (optional)	-
scale	Maps abstract data to visual data, see Scale	object (optional)	-
animate	Animation as an important part of visualization can significantly improve the expressiveness of data visualization, see Animation	object (optional)	-
interaction	Provides the ability to explore data on demand, see Interaction	object (optional)	-
state	Implements interaction feedback, highlighting, selection and other effects, see State, chart styles under different interactions	object (optional)	-
annotations	View is like a drawing board, `Funnel` component draws a funnel chart on it by default, we can overlay more layers on it through annotations, see Annotations	Array (optional)	-

Ant Design Charts

Funnel Chart

Introduction

Code Examples

Basic Usage

Different Shapes

Transposed

Mirror Comparison

Configuration

Overview

Events

Methods