ContextQMD
Back to Reflex

Radial Bar Chart

docs/library/graphing/charts/radialbarchart.md

0.9.73.7 KB
Original Source

Radial Bar Chart

python
import reflex as rx

Radial bar charts in Reflex are built on Recharts, a React charting library, and created in pure Python. A radial bar chart is a circular visualization where data categories are represented by bars extending outward from a central point, with the length of each bar proportional to its value.

Simple Example

This example demonstrates how to use a radial_bar_chart with a radial_bar. The radial_bar_chart takes in data and then the radial_bar takes in a data_key naming the value each bar represents. The min_angle prop sets a minimum sweep for every bar so that even small values stay visible around the circle.

md
# Fill color supports `rx.color()`, which automatically adapts to dark/light mode changes.
python
data = [
    {"name": "C", "x": 3, "fill": rx.color("cyan", 9)},
    {"name": "D", "x": 4, "fill": rx.color("blue", 9)},
    {"name": "E", "x": 5, "fill": rx.color("orange", 9)},
    {"name": "F", "x": 6, "fill": rx.color("red", 9)},
    {"name": "G", "x": 7, "fill": rx.color("gray", 9)},
    {"name": "H", "x": 8, "fill": rx.color("green", 9)},
    {"name": "I", "x": 9, "fill": rx.color("accent", 6)},
]


def radial_bar_simple():
    return rx.recharts.radial_bar_chart(
        rx.recharts.radial_bar(
            data_key="x",
            min_angle=15,
        ),
        data=data,
        width="100%",
        height=500,
    )

Advanced Example

The start_angle and end_angle define the circular arc over which the bars are distributed, while inner_radius and outer_radius determine the radial extent of the bars from the center. Sweeping a half circle (start_angle=180, end_angle=0) is a common way to build a gauge chart.

python
data_radial_bar = [
    {"name": "18-24", "uv": 31.47, "pv": 2400, "fill": "#8884d8"},
    {"name": "25-29", "uv": 26.69, "pv": 4567, "fill": "#83a6ed"},
    {"name": "30-34", "uv": -15.69, "pv": 1398, "fill": "#8dd1e1"},
    {"name": "35-39", "uv": 8.22, "pv": 9800, "fill": "#82ca9d"},
    {"name": "40-49", "uv": -8.63, "pv": 3908, "fill": "#a4de6c"},
    {"name": "50+", "uv": -2.63, "pv": 4800, "fill": "#d0ed57"},
    {"name": "unknown", "uv": 6.67, "pv": 4800, "fill": "#ffc658"},
]


def radial_bar_advanced():
    return rx.recharts.radial_bar_chart(
        rx.recharts.radial_bar(
            data_key="uv",
            min_angle=90,
            background=True,
            label={"fill": "#666", "position": "insideStart"},
        ),
        data=data_radial_bar,
        inner_radius="10%",
        outer_radius="80%",
        start_angle=180,
        end_angle=0,
        width="100%",
        height=300,
    )

When to Use a Radial Bar Chart

A radial bar chart is a compact, eye-catching alternative to a standard bar chart, best suited to comparing a small number of categories or showing progress toward a goal. Because the bars wrap around a circle, it works well for dashboards where space is limited. The key props for shaping the chart are inner_radius and outer_radius (how far the bars sit from the center), start_angle and end_angle (the arc the bars span — use 180 to 0 for a half-circle gauge), min_angle (the minimum bar length), and background (a track drawn behind each bar). For many categories or precise value comparisons, a standard Bar Chart is usually easier to read.

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