Funnel Chart

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 for example a business or sales process.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(
            position="right",
            data_key="name",
            fill="#000",
            stroke="none",
        ),
        rx.recharts.label_list(
            position="right",
            data_key="name",
            fill="#000",
            stroke="none",
        ),
        data_key="value",
        data=data,
    ),
    rx.recharts.graphing_tooltip(),
    width=730,
    height=250,
)

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"},
]

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 index():
    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=1000,
        height=250,
    )

API Reference

FunnelChart

A Funnel chart component in Recharts.

Prop	Type	Description
`data`	List	The source data, in which each element is an object.
`sync_id`	str	If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
`sync_method`	str	When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' \| 'value' \| function
`width`	Union	The width of chart container. String or Integer
`height`	Union	The height of chart container.
`layout`	str	The layout of area in the chart. 'horizontal' \| 'vertical'
`margin`	Dict	The sizes of whitespace around the chart.
`stack_offset`	Literal	The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' \| 'none' \| 'wiggle' \| 'silhouette'
`layout`	str	The layout of bars in the chart. centeric

Valid Children

Legend
GraphingTooltip
Funnel

Event Triggers

See the full list of default event triggers

Funnel

A Funnel component in Recharts.

Prop	Type	Description
`data`	List	The source data, in which each element is an object.
`animation_begin`	int	Specifies when the animation should begin, the unit of this option is ms.
`animation_duration`	int	Specifies the duration of animation, the unit of this option is ms.
`animation_easing`	Literal	The type of easing function. 'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'
`layout`	Literal	The layout of bar in the chart, usually inherited from parent. 'horizontal' \| 'vertical'
`data_key`	Union	The key of a group of data which should be unique in an area chart.
`x_axis_id`	Union	The id of x-axis which is corresponding to the data.
`y_axis_id`	Union	The id of y-axis which is corresponding to the data.

Valid Children

LabelList
Cell

Event Triggers

See the full list of default event triggers

← Errorbar Label →

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Funnel Chart

API Reference

FunnelChart

Funnel