[ Learn ]
[ Concepts ]
[ Reference ]
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 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,
)FunnelChart
A Funnel chart component in Recharts.
Base Event Triggers
Funnel
A Funnel component in Recharts.
Base Event Triggers
Copyright © 2023 Pynecone, Inc.