[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

API Reference

Recipes

PieChart

A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

For a pie chart we must define an rx.recharts.pie() component for each set of values we wish to plot. Each rx.recharts.pie() component has a data, a data_key and a name_key which clearly states which data and which variables in our data we are tracking. In this simple example we plot value column as our data_key against the name column which we set as our name_key.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=data01,
        data_key="value",
        name_key="name",
        cx="50%",
        cy="50%",
        fill="#8884d8",
        label=True,
    )
)

data01 = [
    {"name": "Group A", "value": 400},
    {"name": "Group B", "value": 300},
    {"name": "Group C", "value": 300},
    {"name": "Group D", "value": 200},
    {"name": "Group E", "value": 278},
    {"name": "Group F", "value": 189},
]

We can also add two pies on one chart by using two rx.recharts.pie components.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=data01,
        data_key="value",
        name_key="name",
        cx="50%",
        cy="50%",
        fill="#82ca9d",
        inner_radius="60%",
    ),
    rx.recharts.pie(
        data=data02,
        data_key="value",
        name_key="name",
        cx="50%",
        cy="50%",
        fill="#8884d8",
        outer_radius="50%",
    ),
    rx.recharts.graphing_tooltip(),
)

data01 = [
    {"name": "Group A", "value": 400},
    {"name": "Group B", "value": 300},
    {"name": "Group C", "value": 300},
    {"name": "Group D", "value": 200},
    {"name": "Group E", "value": 278},
    {"name": "Group F", "value": 189},
] & data02 = [
    {"name": "Group A", "value": 2400},
    {"name": "Group B", "value": 4567},
    {"name": "Group C", "value": 1398},
    {"name": "Group D", "value": 9800},
    {"name": "Group E", "value": 3908},
    {"name": "Group F", "value": 4800},
]

Dynamic Data

Chart data tied to a State var causes the chart to automatically update when the state changes, providing a nice way to visualize data in response to user interface elements. View the "Data" tab to see the substate driving this half-pie chart.

🏆1

🪵1

🥑1

🧱1

rx.hstack(
    rx.recharts.pie_chart(
        rx.recharts.pie(
            data=PieChartState.resources,
            data_key="count",
            name_key="type_",
            cx="50%",
            cy="50%",
            start_angle=180,
            end_angle=0,
            fill="#8884d8",
            label=True,
        ),
        rx.recharts.graphing_tooltip(),
    ),
    rx.vstack(
        rx.foreach(
            PieChartState.resource_types,
            lambda type_, i: rx.hstack(
                rx.button(
                    "-",
                    on_click=PieChartState.decrement(type_),
                ),
                rx.text(
                    type_,
                    PieChartState.resources[i]["count"],
                ),
                rx.button(
                    "+",
                    on_click=PieChartState.increment(type_),
                ),
            ),
        ),
    ),
    width="100%",
    height="15em",
)

class PieChartState(rx.State):
    resources: list[dict[str, Any]] = [
        dict(type_="🏆", count=1),
        dict(type_="🪵", count=1),
        dict(type_="🥑", count=1),
        dict(type_="🧱", count=1),
    ]

    @rx.cached_var
    def resource_types(self) -> list[str]:
        return [r["type_"] for r in self.resources]

    def increment(self, type_: str):
        for resource in self.resources:
            if resource["type_"] == type_:
                resource["count"] += 1
                break

    def decrement(self, type_: str):
        for resource in self.resources:
            if (
                resource["type_"] == type_
                and resource["count"] > 0
            ):
                resource["count"] -= 1
                break

PieChart

A Pie chart component in Recharts.

Props

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`	Literal	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`	Literal	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'

Base Event Triggers

← Line Radar →

[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

PieChart

Dynamic Data

PieChart

Props

Base Event Triggers

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

[ Core Charts ]

[ Core Helpers ]

[ Other Graphing ]

PieChart

Dynamic Data

PieChart

Props

Base Event Triggers

[ Learn ]