ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Charts

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

Official docs

Workshop order

Please show, as a funnel, how many people remain at each step from visit to sign-up, trial and payment.

rx.recharts.funnel_chart shows, in a funnel shape, how much a value shrinks across consecutive steps. Use it to see where people drop off in a sign-up flow or a purchase flow. data goes on rx.recharts.funnel, and putting "fill" in each dict of the data sets the color of each step.

Step names are attached by placing rx.recharts.label_list inside funnel. data_key picks which value becomes the text, and position decides where it goes.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

Try the props

Change the label position and content, the step border color and the animation. The data is funnelchart_data from above.

Try the props

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside" centers the text inside each step. Turn off is_animation_active and the chart appears fully drawn from the start.

Prop	Values	Default	Use
`funnel_chart(width=, height=, margin=)`	number or percentage / dict	`"100%"` / 5 each	Size and margin
`funnel_chart(layout=, stroke=)`	string / color	`"centric"`	Step arrangement; border color
`funnel(data=)`	list of dicts	none	Step data. Color via the `"fill"` key
`funnel(data_key=, name_key=)`	string	none / `"name"`	Keys for the step value and name
`funnel(stroke=)`	color	gray 3	Step border
`funnel(legend_type=)`	legend icon	`"line"`	Legend shape
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	Entrance animation
`label_list(data_key=, position=)`	key / `"right"` `"inside"` …		Text attached to each step
`label_list(fill=, stroke=, offset=)`	color / number	gray 10 / `"none"` / `5`	Text color, outline, distance
Events	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		On the chart and `funnel`. `funnel` also has `on_animation_start` and `on_animation_end`

Events

funnel_chart accepts click and mouse events. Hover over the chart below, click it and move away. Each event pops up a toast. You can wire events to State handlers as well as to built-in actions such as rx.toast.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

Data that changes with State

The funnel's data is connected to a State value, and the funnel's on_click sets new values. Each click on the funnel keeps the first step at 100 and fills each following step with a value 0–20 lower.

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

Changing the animation

animation_begin is the delay before drawing starts, and animation_duration is how long drawing takes (in milliseconds). animation_easing picks how it speeds up and slows down. Add a legend and the step names appear as a legend.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

Filling the order

Two label_lists put the step names on the right and the head counts inside. The colors are shades of a single hue that lighten as the steps go down, and a wider right margin keeps the names from being cut off.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

Workshop notes

Put funnel(data=…, data_key=…) inside funnel_chart. Step colors come from "fill" in the data.
Step names are label_list(data_key=, position=) inside funnel. You can add more than one.
funnel_chart accepts on_click, on_mouse_enter and on_mouse_leave.
The funnel's on_click plus State data redraws the funnel.
animation_begin, animation_duration and animation_easing control how it draws.

← Previous

Charts · Scatter Chart

Charts · Treemap

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.