Pie Chart

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",
)

API Reference

PieChart

A Pie 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`	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'

Valid Children

PolarAngleAxis
PolarRadiusAxis
PolarGrid
Legend
GraphingTooltip
Pie

Event Triggers

See the full list of default event triggers

← Linechart Plotly →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Pie Chart

Dynamic Data

API Reference

PieChart