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

Bar Chart

rx.recharts.bar_chartrx.recharts.barrx.recharts.cell

Offizielle Doku

Werkstattauftrag

Stell die Kaffee- und Teeverkäufe jeder Filiale nebeneinander, damit man vergleichen kann, welche Filiale was am meisten verkauft.

rx.recharts.bar_chart stellt für jede Kategorie einen Balken auf und vergleicht so Größen. Für getrennte Kategorien wie Umsatz pro Filiale oder Anzahl pro Gruppe ist es meist die erste Wahl. Du gibst dem Diagramm-Container data und legst für jede zu zeichnende Reihe ein rx.recharts.bar(data_key=…) hinein.

Die meisten Beispiele auf dieser Seite verwenden das folgende barchart_data.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    width="100%",
    height=250,
)

Props ausprobieren

Mit zwei bar stehen innerhalb einer Kategorie zwei Balken nebeneinander. Ändere den Abstand zwischen den Kategorien (bar_category_gap), den Abstand zwischen den Balken einer Kategorie (bar_gap) und den grauen Hintergrund hinter den Balken (background).

Props ausprobieren

color

bar_category_gap

bar_gap

background

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("indigo", 8),
        background=False,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill=rx.color("teal", 8),
        background=False,
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="10%",
    bar_gap="5%",
    width="100%",
    height=250,
)

Abstände gibst du als Prozent-String oder als Pixelzahl an. Mit background wird der gesamte Platz, den ein Balken einnehmen kann, blass eingefärbt.

Prop	Werte	Standard	Verwendung
`bar_chart(data=)`	Liste von Dicts	keiner	Daten für das ganze Diagramm
`bar_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Senkrechte oder waagerechte Balken
`bar_chart(bar_category_gap=)`	Prozent/Zahl	`"10%"`	Abstand zwischen den Kategorien
`bar_chart(bar_gap=)`	Prozent/Zahl	`4`	Abstand zwischen den Balken einer Kategorie
`bar_chart(bar_size=, max_bar_size=)`	Zahl	automatisch	Breite aller Balken, maximale Breite
`bar_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	`"none"`	Wie die Basis gestapelter Balken berechnet wird
`bar_chart(reverse_stack_order=)`	`True` / `False`	`False`	Kehrt die Stapelreihenfolge um
`bar_chart(sync_id=, margin=)`	String / Dict	keiner	Mit anderen Diagrammen koppeln, Außenabstand
`bar(data_key=)`	String	keiner	Schlüssel des zu zeichnenden Werts. Ist der Wert `[niedrig, hoch]`, entsteht ein Bereichsbalken
`bar(fill=, stroke=)`	Farbe	accent 9 / keiner	Balken- und Randfarbe
`bar(stack_id=)`	String	keiner	Balken mit gleichem Wert werden aufeinandergestapelt
`bar(radius=)`	Zahl oder `[oben links, oben rechts, unten rechts, unten links]`	`0`	Eckenrundung
`bar(background=)`	`True` / `False`	`False`	Hintergrund am Balkenplatz
`bar(min_point_size=)`	Zahl	keiner	Auch Werte nahe 0 bleiben mindestens so groß sichtbar
`bar(name=, unit=, label=)`	String / bool		Name in Tooltip und Legende, Einheit, Zahl über dem Balken
`on_click` `on_mouse_enter` …	Event		Diagramm, `bar` und `cell` nehmen alle Events an

Gestapelte Balken und 100-%-Balken

bars mit derselben stack_id werden in einem Balken übereinandergestapelt. Die Gesamthöhe des Balkens ist dann die Summe. Mit stack_offset="expand" am Diagramm werden alle Balken gleich hoch, und es bleiben nur die Anteile der einzelnen Teile.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        width="100%",
        height=250,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="coffee", stack_id="1", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="tea", stack_id="1", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="store"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=barchart_data,
        stack_offset="expand",
        width="100%",
        height=250,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Bereichsbalken

Ist der Wert hinter data_key keine einzelne Zahl, sondern ein Paar [niedrig, hoch], beginnt der Balken nicht bei 0, sondern beim niedrigen Wert und endet beim hohen. So zeigst du Spannen wie die Tiefst- und Höchsttemperatur eines Tages.

rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="temperature",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 7),
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "temperature": [-1, 10]},
        {"day": "Tue", "temperature": [2, 15]},
        {"day": "Wed", "temperature": [3, 12]},
        {"day": "Thu", "temperature": [4, 12]},
        {"day": "Fri", "temperature": [12, 16]},
        {"day": "Sat", "temperature": [5, 16]},
        {"day": "Sun", "temperature": [0, 8]},
    ],
    width="100%",
    height=250,
)

Balkenbreite und Abstände

bar_size legt die Breite aller Balken in Pixeln fest, max_bar_size die Höchstbreite. Im Beispiel unten steht zwar bar_size=100, aber max_bar_size=24 gewinnt, sodass kein Balken breiter als 24 Pixel wird. Das verhindert zu dicke Balken, wenn es nur wenige Kategorien gibt.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    data=barchart_data,
    bar_category_gap="15%",
    bar_gap=6,
    bar_size=100,
    max_bar_size=24,
    width="100%",
    height=250,
)

Abgerundete Ecken und Farbverlauf

Eine einzelne Zahl für radius rundet alle vier Ecken ab; eine Liste wie [8, 8, 0, 0] legt die Ecken einzeln fest, in der Reihenfolge oben links, oben rechts, unten rechts, unten links. Sind nur die oberen Ecken rund, wirkt der Balken, als stünde er auf dem Boden. Als Füllung kannst du wie beim Flächendiagramm einen Farbverlauf aus rx.el.svg.defs über url(#id) verwenden.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.9),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.2),
            id="barchart_gradient",
            x1=0,
            y1=0,
            x2=0,
            y2=1,
        ),
    ),
    rx.recharts.bar(
        data_key="coffee",
        fill=rx.color("teal", 8),
        radius=8,
    ),
    rx.recharts.bar(
        data_key="tea",
        fill="url(#barchart_gradient)",
        radius=[8, 8, 0, 0],
    ),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=barchart_data,
    width="100%",
    height=250,
)

Waagerechte Balken (layout)

Mit layout="vertical" wird daraus ein waagerechtes Balkendiagramm, dessen Balken von links nach rechts wachsen. Die x-Achse wird zur Zahlenachse (type_="number"), die y-Achse zur Kategorienachse (type_="category"). Bei langen Kategorienamen liest sich das bequemer.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.bar(
        data_key="coffee",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 4),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="store", type_="category"),
    data=barchart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=280,
)

State und Klicks

Verbindest du data mit einem State-Wert, wachsen die Balken bei jeder Änderung animiert. Im Diagramm unten werden die Zahlen neu gewürfelt, sobald du irgendwo hineinklickst (on_click von bar_chart).

import random
from typing import Any


class BarChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"store": "North", "coffee": 4000, "tea": 2400},
        {"store": "South", "coffee": 3000, "tea": 1398},
        {"store": "East", "coffee": 2000, "tea": 5800},
        {"store": "West", "coffee": 2780, "tea": 3908},
    ]

    @rx.event
    def shuffle(self):
        self.data = [
            {**row, "coffee": random.randint(500, 6000), "tea": random.randint(500, 6000)}
            for row in self.data
        ]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(data_key="coffee", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="tea", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    on_click=BarChartLiveState.shuffle,
    data=BarChartLiveState.data,
    width="100%",
    height=280,
)

Willst du jedem einzelnen Balken eine eigene Aktion geben, nimm rx.recharts.cell. Erzeugst du in bar mit rx.foreach so viele cells, wie es Datenpunkte gibt, übernimmt jede cell den Balken an derselben Position. Übergib dem on_click der cell den Namen ihrer Kategorie, und schon hast du einen Drilldown, der nur den angeklickten Balken stehen lässt. Ein weiterer Klick auf denselben Balken zeigt wieder alles.

Die Funktion in foreach bekommt (item, index) und gibt eine cell zurück.
Der Klick-Handler wird beim Aufbau der Oberfläche an den Wert der Kategorie gebunden (toggle(item["name"].to(str))).
Mit rx.cond bekommt nur der gewählte Balken eine andere Farbe.
Weil data des Diagramms selbst eine berechnete Var (rows) ist, zeichnet das Diagramm nach der Auswahl nur noch diese Kategorie.

Dasselbe Prinzip funktioniert auch beim Kreisdiagramm (dort kommt die cell in pie).

barchart_genres = [
    {"name": "Fiction", "count": 42},
    {"name": "History", "count": 28},
    {"name": "Science", "count": 35},
    {"name": "Biography", "count": 17},
    {"name": "Fantasy", "count": 24},
]

barchart_colors = ["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"]


class BarChartDrillState(rx.State):
    picked: str = ""

    @rx.var
    def rows(self) -> list[dict[str, str | int]]:
        if self.picked:
            return [g for g in barchart_genres if g["name"] == self.picked]
        return barchart_genres

    @rx.event
    def toggle(self, name: str):
        self.picked = "" if self.picked == name else name


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.x_axis(data_key="name", tick_line=False, axis_line=False),
    rx.recharts.y_axis(allow_decimals=False, axis_line=False, tick_line=False),
    rx.recharts.bar(
        rx.foreach(
            BarChartDrillState.rows,
            lambda item, index: rx.recharts.cell(
                on_click=BarChartDrillState.toggle(item["name"].to(str)),
                custom_attrs={"cursor": "pointer"},
                fill=rx.cond(
                    BarChartDrillState.picked == item["name"],
                    "#1D4ED8",
                    rx.Var.create(barchart_colors)[index % 5],
                ),
            ),
        ),
        data_key="count",
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.graphing_tooltip(),
    data=BarChartDrillState.rows,
    width="100%",
    height=280,
)

Auftrag erledigt

Für jede Filiale stehen Kaffee- und Teebalken nebeneinander, nur oben abgerundet. max_bar_size hält die Balken schlank, Tooltip und Legende liefern Werte und Namen.

barchart_data = [
    {"store": "North", "coffee": 4000, "tea": 2400},
    {"store": "South", "coffee": 3000, "tea": 1398},
    {"store": "East", "coffee": 2000, "tea": 5800},
    {"store": "West", "coffee": 2780, "tea": 3908},
    {"store": "Center", "coffee": 1890, "tea": 4800},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="coffee", name="Coffee", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.bar(data_key="tea", name="Tea", fill=rx.color("teal", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="store"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=barchart_data,
    bar_gap=2,
    max_bar_size=32,
    width="100%",
    height=300,
)

Werkstattnotizen

Ein bar(data_key=…) pro Reihe in bar_chart(data=…) stellt Balken nebeneinander, mit gleicher stack_id werden sie gestapelt.
stack_offset="expand" ergibt 100-%-Balken, ein data_key-Wert [niedrig, hoch] einen Bereichsbalken.
Abstände über bar_category_gap und bar_gap, Breite über bar_size und max_bar_size, Ecken über radius.
layout="vertical" macht waagerechte Balken. Den type_ der Achsen gleich mit umstellen.
Eigene Farbe oder eigener Klick pro Balken: rx.recharts.cell per foreach in bar legen.

← Zurück

Diagramme · Area Chart

Weiter →

Diagramme · Line 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