Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Graphing

/

Charts

/

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.

def pie_simple():
    return rx.recharts.pie_chart(
        rx.recharts.pie(
            data=data01,
            data_key="value",
            name_key="name",
            fill="#8884d8",
            label=True,
        ),
        width="100%",
        height=300,
    )

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

In this example inner_radius and outer_radius props are used. They define the doughnut shape of a pie chart: inner_radius creates the hollow center (use "0%" for a full pie), while outer_radius sets the overall size. The padding_angle prop, used on the green pie below, adds space between pie slices, enhancing visibility of individual segments.

def pie_double():
    return rx.recharts.pie_chart(
        rx.recharts.pie(
            data=data01,
            data_key="value",
            name_key="name",
            fill="#82ca9d",
            inner_radius="60%",
            padding_angle=5,
        ),
        rx.recharts.pie(
            data=data02,
            data_key="value",
            name_key="name",
            fill="#8884d8",
            outer_radius="50%",
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=300,
    )

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

from typing import Any


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


def dynamic_pie_example():
    return 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",
    )

A Pie chart component in Recharts.

PropTypeDescriptionValues
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

  • PolarAngleAxis
  • PolarRadiusAxis
  • PolarGrid
  • Legend
  • GraphingTooltip
  • Pie

A Pie chart component in Recharts.

PropTypeDescriptionValues
dataList

data

data_keyUnion

The key of each sector's value.

cxUnion

The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.

cyUnion

The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.

inner_radiusUnion

The inner radius of pie, which can be set to a percent value.

outer_radiusUnion

The outer radius of pie, which can be set to a percent value.

start_angleint

The angle of first sector.

end_angleint

The direction of sectors. 1 means clockwise and -1 means anticlockwise.

min_angleint

The minimum angle of each unzero data.

padding_angleint

The angle between two sectors.

name_keystr

The key of each sector's name.

legend_typeLiteral

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

labelbool

If false set, labels will not be drawn.

label_linebool

If false set, label lines will not be drawn.

fillstr

Valid children components fill color

strokestr

stroke color

Valid Children

  • Cell
  • LabelList

Did you find this useful?

HomeGalleryChangelogIntroductionHosting