ReflexKR

The Component Workshop: Reflex's 100 Library Components

Course overview

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typography

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Forms

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Data display

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Disclosure

Tabs

Accordion

Segmented Control

Overlay

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamic rendering

Cond

Match

Foreach

Auto Scroll

Media

Image

Audio

Video

Tables and data grids

Table

Data Table

Data Editor

Charts

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Chart parts

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Other chart libraries

Plotly

Pyplot

HTML elements

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Other tools

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

The Component Workshop: Reflex's 100 Library Components

Charts

Radial Bar Chart

rx.recharts.radial_bar_chartrx.recharts.radial_bar

Official docs

Workshop order

Please show three teams' progress toward this quarter's targets as circular progress bars that fit in a single dashboard tile.

rx.recharts.radial_bar_chart bends its bars along a circle instead of drawing them straight. A bar's length (its angle) is the size of the value, and each bar sits at a different distance from the center. Use it when there are few items and little space, or to show progress toward a target.

Put "fill" in a dict of the data and it becomes that bar's color. min_angle keeps even tiny values visible at that angle or more.

radialbarchart_data = [
    {"name": "Mon", "x": 3, "fill": rx.color("cyan", 9)},
    {"name": "Tue", "x": 4, "fill": rx.color("blue", 9)},
    {"name": "Wed", "x": 5, "fill": rx.color("orange", 9)},
    {"name": "Thu", "x": 6, "fill": rx.color("red", 9)},
    {"name": "Fri", "x": 7, "fill": rx.color("gray", 9)},
    {"name": "Sat", "x": 8, "fill": rx.color("green", 9)},
]


rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(data_key="x", min_angle=15),
    data=radialbarchart_data,
    width="100%",
    height=320,
)

Try the props

The chart's inner_radius and outer_radius set the inner and outer edges of the ring the bars sit on, and bar_category_gap is the gap between bars. Turn on background and the space each bar would take when full is lightly shown.

Try the props

inner_radius

outer_radius

bar_category_gap

background

label

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="x",
        min_angle=15,
        background=False,
        label=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=radialbarchart_data,
    inner_radius="30%",
    outer_radius="100%",
    bar_category_gap="10%",
    width="100%",
    height=320,
)

label puts the value on each bar. The data is radialbarchart_data from above.

Prop	Values	Default	Use
`radial_bar_chart(data=)`	list of dicts	none	One dict per bar. Color via the `"fill"` key
`radial_bar_chart(cx=, cy=)`	number or percentage	`"50%"`	Center position
`radial_bar_chart(inner_radius=, outer_radius=)`	number or percentage	`"30%"` / `"100%"`	The ring the bars sit on
`radial_bar_chart(start_angle=, end_angle=)`	number (degrees)	`0` / `360`	Range and direction the bars sweep
`radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=)`	percentage or number	`"10%"` / `4` / auto	Bar gaps and thickness
`radial_bar_chart(margin=)`	dict	5 each	Space around the chart
`radial_bar(data_key=)`	string	none	The value that becomes the bar length
`radial_bar(min_angle=)`	number (degrees)	none	Minimum angle for small values
`radial_bar(background=)`	`True` / `False` / dict	none	Background for the empty track
`radial_bar(label=)`	`True` / `False` / dict	none	Value labels. A dict sets `fill` and `position`
`radial_bar(legend_type=)`	legend icon		Legend shape
`radial_bar(animation_begin=, animation_duration=, animation_easing=)`			Entrance animation
Events	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		Mouse events on the chart area

Half circle and labels (advanced example)

With start_angle=180 and end_angle=0, the bars sweep a half circle from left to right. A dict for label sets the color (fill) and position (position) of the value text, and "insideStart" places the text inside the bar at its starting end. background=True lays an empty track behind the bars.

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="uv",
        min_angle=90,
        background=True,
        label={"fill": "#666", "position": "insideStart"},
    ),
    data=[
        {"name": "18-24", "uv": 31.47, "fill": "#8884d8"},
        {"name": "25-29", "uv": 26.69, "fill": "#83a6ed"},
        {"name": "30-34", "uv": 15.69, "fill": "#8dd1e1"},
        {"name": "35-39", "uv": 8.22, "fill": "#82ca9d"},
        {"name": "40-49", "uv": 8.63, "fill": "#a4de6c"},
        {"name": "50+", "uv": 2.63, "fill": "#d0ed57"},
    ],
    inner_radius="10%",
    outer_radius="80%",
    start_angle=180,
    end_angle=0,
    width="100%",
    height=300,
)

Progress gauge

To show a value as "so many out of 100", you have to fix the range of the angle axis. Give the angle axis polar_angle_axis a numeric type (type: "number") and a range (domain: [0, 100]) and one full turn equals 100. In 0.10, polar_angle_axis has no separate props for these two, so they are passed straight to Recharts through custom_attrs. Without this axis, the largest value fills the full circle. start_angle=90 and end_angle=-270 start at 12 o'clock and go clockwise.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="value",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "center"},
    ),
    data=[{"name": "Goal", "value": 72, "fill": rx.color("accent", 9)}],
    inner_radius="70%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=220,
)

When to use it

When fitting the sizes of a few items into a tight spot, such as one dashboard tile
When showing several progress-toward-target values together

Because bar length is an angle, an outer bar and an inner bar look different in length even for the same value. If values need precise comparison, a bar chart is better. Fine-tune the shape with inner_radius, outer_radius, start_angle, end_angle and bar_size.

Filling the order

The angle axis is fixed at 0–100, so the three teams' progress is drawn on the same scale. The legend stands vertically on the right to show the team names, and label puts the numbers inside the bars.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="done",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "insideStart"},
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(icon_size=10, layout="vertical", vertical_align="middle", align="right"),
    data=[
        {"name": "Sales", "done": 82, "fill": rx.color("indigo", 9)},
        {"name": "Support", "done": 64, "fill": rx.color("teal", 9)},
        {"name": "Design", "done": 45, "fill": rx.color("orange", 9)},
    ],
    inner_radius="30%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=280,
)

Workshop notes

Put radial_bar(data_key=…) inside radial_bar_chart(data=…). Bar colors come from "fill" in the data.
The ring is inner_radius and outer_radius; the direction is start_angle and end_angle (180→0 gives a half circle).
min_angle keeps small values visible, and background=True lays down an empty track.
For progress, fix one turn at 100 with polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}).
When precise comparison matters, use a bar chart.

← Previous

Charts · Radar Chart

Charts · Scatter Chart

Get news about new lessons

We'll email you when this course gets new lessons or a follow-up course opens.