Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Graphing

/

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

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

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

A Pie chart component in Recharts.

PropTypeDescriptionValues
dataList

The source data, in which each element is an object.

sync_idstr

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_methodLiteral

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

widthUnion

The width of chart container. String or Integer

heightUnion

The height of chart container.

layoutLiteral

The layout of area in the chart. 'horizontal' | 'vertical'

marginDict

The sizes of whitespace around the chart.

stack_offsetLiteral

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

No component specific event triggers

← LinechartPlotly →

Did you find this useful?