ChartFunnel

Funnel charts: conversion through ordered stages, with stage labels and shares.

Introduction

ChartFunnel shows conversion through ordered stages. Stages come from data; compose it with ChartLegend and ChartTooltip. Shared parts, colors, and accessibility are in Chart.

When to use: Sign-up flows, checkouts, and sales pipelines where each stage is a subset of the previous one.

Compared to similar components:

• ChartPie — Parts of one whole with no order.
• ChartBar — Stages that do not narrow, or several series per stage.

Use the framework selector in the site header to switch between React and Vue.

Import

import { ChartFunnel } from "@bridge-ui/vue/Components/ChartFunnel";

import { ChartFunnel } from "@bridge-ui/react/Components/ChartFunnel";

Add ChartAxis, ChartLegend, and ChartTooltip from Chart.

Basic usage

Pass the stages as data, each with a label and a value. Stages are sorted from the largest by default. Shares compare each stage to the largest one, whatever the order: with sort="none", a stage after a smaller one can show a higher share.

Labels, legend, and alignment

Stage labels are on and sit inside the shape by default. labelPosition="outside" moves them next to it, labels={false} hides them, and labelContent picks the text (label, value, percent, or a function). align pins the shape to the left, center, or right.

Keyboard and accessibility

Arrow keys move between stages in visual order, and each stage is announced with its share. The root generates a summary with the stage count and the first and last stages. See Chart for the shared behavior.

Related components

Chart, ChartPie, ChartBar

API

ChartFunnel

Shared root props (height, palette, loading, summary, …) are listed in Chart.