ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Diagramme

Radial Bar Chart

rx.recharts.radial_bar_chartrx.recharts.radial_bar

Offizielle Doku

Werkstattauftrag

Zeig, wie weit drei Teams ihr Quartalsziel erreicht haben, als runde Fortschrittsbalken, die in eine Dashboard-Kachel passen.

rx.recharts.radial_bar_chart biegt Balken entlang eines Kreises, statt sie gerade zu zeichnen. Die Länge (der Winkel) eines Balkens ist die Größe des Werts, und jeder Balken hat einen anderen Abstand zum Mittelpunkt. Es passt bei wenigen Kategorien und wenig Platz oder um den Fortschritt gegenüber einem Ziel zu zeigen.

Ein "fill" in einem Dict der Daten wird zur Farbe dieses Balkens. min_angle sorgt dafür, dass auch sehr kleine Werte mindestens mit diesem Winkel sichtbar sind.

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

Props ausprobieren

inner_radius und outer_radius des Diagramms legen Innen- und Außenkante des Rings fest, auf dem die Balken liegen; bar_category_gap ist der Abstand zwischen den Balken. Mit background siehst du blass den Platz, den ein ganz gefüllter Balken einnehmen würde.

Props ausprobieren

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

Mit label bekommt jeder Balken seinen Wert. Die Daten sind das radialbarchart_data von oben.

Prop	Werte	Standard	Verwendung
`radial_bar_chart(data=)`	Liste von Dicts	keiner	Ein Dict pro Balken. Farbe über den Schlüssel `"fill"`
`radial_bar_chart(cx=, cy=)`	Zahl/Prozent	`"50%"`	Lage des Mittelpunkts
`radial_bar_chart(inner_radius=, outer_radius=)`	Zahl/Prozent	`"30%"` / `"100%"`	Ring, auf dem die Balken liegen
`radial_bar_chart(start_angle=, end_angle=)`	Zahl (Grad)	`0` / `360`	Winkelbereich und Drehrichtung der Balken
`radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=)`	Prozent/Zahl	`"10%"` / `4` / automatisch	Balkenabstände und -breite
`radial_bar_chart(margin=)`	Dict	je 5	Außenabstand
`radial_bar(data_key=)`	String	keiner	Wert, der zur Balkenlänge wird
`radial_bar(min_angle=)`	Zahl (Grad)	keiner	Mindestwinkel kleiner Werte
`radial_bar(background=)`	`True` / `False` / Dict	keiner	Hintergrund für den leeren Platz
`radial_bar(label=)`	`True` / `False` / Dict	keiner	Wertanzeige. Per Dict `fill` und `position`
`radial_bar(legend_type=)`	Legendensymbol		Legendenform
`radial_bar(animation_begin=, animation_duration=, animation_easing=)`			Einblendanimation
Events	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		Maus-Events im Diagrammbereich

Halbkreis und Labels (fortgeschrittenes Beispiel)

Mit start_angle=180 und end_angle=0 beschreiben die Balken einen Halbkreis von links nach rechts. Ein Dict für label legt Farbe (fill) und Position (position) des Werttexts fest; "insideStart" setzt den Text innen an den Anfang des Balkens. background=True legt eine leere Spur hinter die Balken.

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

Fortschrittsanzeige

Sollen Werte als „so viele von 100“ erscheinen, musst du den Bereich der Winkelachse festlegen. Gibst du der Winkelachse polar_angle_axis eine Zahlenachse (type: "number") und einen Bereich (domain: [0, 100]), entspricht eine volle Runde 100. In 0.10 hat polar_angle_axis für beides keine eigenen Props, daher reichst du sie per custom_attrs direkt an Recharts durch. Ohne diese Achse füllt der größte Wert die ganze Runde. start_angle=90 und end_angle=-270 beginnen bei 12 Uhr und laufen im Uhrzeigersinn.

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

Wann einsetzen?

Wenn die Größen weniger Kategorien auf engen Raum passen müssen, etwa in eine Dashboard-Kachel
Wenn du mehrere Fortschritte gegenüber einem Ziel ineinander zeigen willst

Weil die Balkenlänge ein Winkel ist, wirken ein äußerer und ein innerer Balken bei gleichem Wert unterschiedlich lang. Müssen Werte genau verglichen werden, ist ein Balkendiagramm besser. Die Form feilst du mit inner_radius, outer_radius, start_angle, end_angle und bar_size aus.

Auftrag erledigt

Die Winkelachse ist auf 0–100 festgelegt, sodass die Zielerreichung der drei Teams auf derselben Skala gezeichnet wird. Die Legende steht senkrecht rechts und nennt die Teamnamen, und label schreibt die Zahl in den Balken.

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

Werkstattnotizen

In radial_bar_chart(data=…) kommt radial_bar(data_key=…). Die Balkenfarbe ist "fill" in den Daten.
Den Ring bestimmen inner_radius und outer_radius, die Richtung start_angle und end_angle (180→0 ergibt einen Halbkreis).
min_angle macht kleine Werte sichtbar, background=True legt eine leere Spur darunter.
Für Fortschritt fixiert polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}) eine volle Runde auf 100.
Für genaue Vergleiche lieber ein Balkendiagramm.

← Zurück

Diagramme · Radar Chart

Weiter →

Diagramme · Scatter Chart

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex