Pie Chart

Pie charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A pie chart — or a donut chart when the center is hollow — 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. We also use the fill prop to set the color of the pie slices.

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.

Instead of storing a fill color in every data entry, you can pass rx.recharts.cell components as children of rx.recharts.pie — one cell per slice. Using rx.foreach with the index argument lets you cycle through a color palette, so the palette lives in one place and works for any number of slices. This example also combines inner_radius and padding_angle to render the pie as a donut, and uses stroke with custom_attrs={"strokeWidth": 2} to draw a separator around each slice. (Passing stroke_width directly is not forwarded to the underlying SVG element, so the width goes through custom_attrs.)

Slices can also be filled with SVG gradients. Define the gradients inside a hidden rx.el.svg element, then reference each one from a cell's fill prop with url(#gradient_id). A radial gradient works well for pie slices since it follows the circular shape.

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.

Charts can react to the mouse with on_mouse_enter and on_mouse_leave. Like click events, these are best attached to rx.recharts.cell components rendered with rx.foreach, so each handler is bound to the index of its data point at render time and the event handler can look up the hovered item in state.

This example shows the hovered slice's name and value in the center of a donut chart, and clears them when the mouse leaves.

Explore more chart types you can build with Reflex and Recharts in pure Python:

• Radial Bar Chart
• Funnel Chart
• Bar Chart