Pie and Donut Charts in Python

A pie chart (also called a pie plot or pie graph) maps each share to an angular span. A donut uses the same sectors with a positive inner radius, leaving room for a total, status, or supporting label. In XY, both are compositions of unequal-width bars inside polar_bar_chart(). For the standard composition, use xy.pie_chart(labels, values, hole=...); the examples below use the lower-level bars directly to demonstrate custom sector geometry and dashboard layouts.

Jump to a basic pie chart, progress rings, or build your own pie block.

The first example keeps the chart intentionally small. The examples after it combine XY's exportable sector geometry with ordinary Reflex layout for center labels, legends, captions, and summary rows. That separation keeps the data visualization reusable while the surrounding block remains easy to adapt to a dashboard.

A filled pie starts with simple label-and-value data. The chart converts each value to an angular width, and base=0 makes every sector reach the center:

PIE_DATA stays independent of the chart geometry, so changing a value updates both its slice and legend percentage. The separate palette uses the same #6e56cf primary purple used throughout these docs.

Use a high-contrast donut when the whole is meaningful and every slice needs a compact percentage label. The two-column legend preserves the names and raw values without crowding the ring:

The slot width remains proportional to the value. A three-pixel background-colored stroke creates a constant screen-space separator; unlike an angular gap, it stays visually even at the inner and outer rim. Text annotations use (theta, radius) coordinates, so their anchors remain attached to the slices in browser and static output.

A thin annulus can behave like a circular progress bar. Splitting it into 40 rounded dashes gives the display a lighter rhythm than one continuous arc:

Each visible dash occupies half of a nine-degree slot. The remaining half is the gap, so the track stays evenly spaced without creating transparent data rows.

For a smaller category set, pair a rounded donut with a value list. The center answers the primary question while the aligned legend supports exact lookup:

Rounded corners are available when base is positive. A CSS linear gradient paints each one-slice mark independently, so every segment can keep its own two-color ramp.

A partial donut becomes a gauge when its angular span represents an ordered scale. Keep the qualitative bands in the ring and repeat them as a linear key for exact threshold lookup:

This example keeps a full circular layout and authors only 240 degrees of colored bars, matching a conventional dashboard gauge. Use theta_axis(sector=(start, end)) instead when the visible arc should expand to fill the plot box.

1. Normalize values to a full turn (360 degrees or 2π radians).
2. Use the cumulative midpoint of each slot as the bar angle.
3. Add a background-colored stroke for a constant-pixel separator, or subtract a small angle from each slot when the gap should scale with the ring.
4. Give every slice the same base and height.
5. Hide the axes and compose labels or legends around the chart with Reflex.

Set base=0 for a filled pie. For donuts, a positive base enables rounded sector corners. Per-slice gradients are easiest to express as one single-slice bar mark per category.

Pie blocks use the shared polar renderer. These examples set xy.modebar(show=False) to keep the presentation clean. The underlying interactions and APIs remain intact: sector hover, radial wheel zoom, double-click reset, and browser/static exports remain available. A hovered slice reads its own label and value; the layout angle and the constant rim radius stay out of the readout. Center labels and legends composed in Reflex are browser UI; annotations placed with xy.text() are part of the chart and are preserved in SVG and native raster exports.

See Radial bar charts for width, base, corner-radius, clipping, and partial-sector details.

• Polar overview — shared axes, interaction, annotations, pyplot, and renderer limits.
• Radial bar charts — equal-angle and variable-height annular sectors.
• Radar charts — categorical profile comparisons.
• Wind rose charts — direction and speed distributions.

No. Every pie plot and donut plot on this page is composed from xy.bar() marks inside xy.polar_bar_chart(). This keeps sector styling and export behavior on the same renderer as radial bars.

For an even screen-space separator, keep the proportional width and add a background-colored stroke with stroke_width=. For an angular gap, pass a slightly smaller per-item width while keeping each slot midpoint unchanged.

Pass corner_radius= on bars whose base is positive. A filled pie reaches the center and therefore keeps a sharp center vertex.