Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

Funnelchart

A funnel chart is a graphical representation used to visualize how data moves through a process. In a funnel chart, the dependent variable’s value diminishes in the subsequent stages of the process. It can be used to demonstrate the flow of users through a business or sales process.

def funnel_simple():
    return rx.recharts.funnel_chart(
        rx.recharts.funnel(
            rx.recharts.label_list(
                position="right",
                data_key="name",
                fill="#000",
                stroke="none",
            ),
            data_key="value",
            data=data,
        ),
        width="100%",
        height=250,
    )

Funnel chart supports on_click, on_mouse_enter, on_mouse_leave and on_mouse_move event triggers, allows you to interact with the funnel chart and perform specific actions based on user interactions.

def funnel_events():
    return rx.recharts.funnel_chart(
        rx.recharts.funnel(
            rx.recharts.label_list(
                position="right",
                data_key="name",
                fill="#000",
                stroke="none",
            ),
            data_key="value",
            data=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,
    )

Here is an example of a funnel chart with a State. Here we have defined a function randomize_data, which randomly changes the data when the graph is clicked on using on_click=FunnelState.randomize_data.

class FunnelState(rx.State):
    data = data

    def randomize_data(self):
        self.data[0]["value"] = 100
        for i in range(len(self.data) - 1):
            self.data[i + 1]["value"] = self.data[i][
                "value"
            ] - random.randint(0, 20)


def funnel_state():
    return rx.recharts.funnel_chart(
        rx.recharts.funnel(
            rx.recharts.label_list(
                position="right",
                data_key="name",
                fill="#000",
                stroke="none",
            ),
            data_key="value",
            data=FunnelState.data,
            on_click=FunnelState.randomize_data,
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=250,
    )

The is_animation_active prop can be used to turn off the animation, but defaults to True. animation_begin sets the delay before animation starts, animation_duration determines how long the animation lasts, and animation_easing defines the speed curve of the animation for smooth transitions.

def funnel_animation():
    return rx.recharts.funnel_chart(
        rx.recharts.funnel(
            data_key="value",
            data=data,
            animation_begin=300,
            animation_duration=9000,
            animation_easing="ease-in-out",
        ),
        rx.recharts.graphing_tooltip(),
        rx.recharts.legend(),
        width="100%",
        height=300,
    )

A Funnel chart component in Recharts.

PropTypeDescriptionValues
layoutstr

The layout of bars in the chart. centeric

marginDict

The sizes of whitespace around the chart.

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

Valid Children

  • Legend
  • GraphingTooltip
  • Funnel

A Funnel component in Recharts.

PropTypeDescriptionValues
dataList

The source data, in which each element is an object.

data_keyUnion

The key of a group of data which should be unique in an area chart.

name_keystr

The key or getter of a group of data which should be unique in a LineChart.

legend_typeLiteral

The type of icon in legend. If set to 'none', no legend item will be rendered.

is_animation_activebool

If set false, animation of line will be disabled.

animation_beginint

Specifies when the animation should begin, the unit of this option is ms.

animation_durationint

Specifies the duration of animation, the unit of this option is ms.

animation_easingLiteral

The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'

Valid Children

  • LabelList
  • Cell

Event Triggers

TriggerDescription
on_animation_start

Valid children components The customized event handler of animation start

on_animation_end

The customized event handler of animation end

Did you find this useful?

HomeGalleryChangelogIntroductionHosting