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

Diagrammbausteine

Label

rx.recharts.labelrx.recharts.label_list

Offizielle Doku

Werkstattauftrag

Bitte über jeden Balken direkt die Zahl schreiben und unter die waagerechte Achse den Namen „Pages“.

Für Text im Diagramm gibt es zwei Bausteine. rx.recharts.label setzt einen einzelnen Text an eine Stelle, etwa an eine Achse oder Referenzlinie; rx.recharts.label_list schreibt automatisch an jeden Datenpunkt einer Reihe einen Wert. Zahlen über Balken sind label_list, Achsennamen sind label.

label_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 5800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        fill=rx.color("accent", 8),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="center", position="center", offset=30),
        rx.recharts.label(value="inside left", position="insideLeft", offset=10),
        rx.recharts.label(value="inside right", position="insideRight", offset=10),
        height=50,
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 20, "bottom": 20},
    width="100%",
    height=250,
)

label kommt als Kind in x_axis und hängt an der Achse. value ist der Text, position die Stelle und offset der Abstand, um den er von dort verschoben wird. label_list kommt als Kind in bar und schreibt den Wert der Spalte data_key an jeden Balken.

Props ausprobieren

Ab dem nächsten Beispiel wird das oben angelegte label_data weiterverwendet.

Props ausprobieren

list_position

list_fill

value

position

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        data_key="uv",
        fill=rx.color("accent", 6),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center"),
        data_key="name",
        height=50,
    ),
    data=label_data,
    margin={"top": 20, "left": 20, "right": 20},
    width="100%",
    height=280,
)

Das position von label_list richtet sich nach dem Balken, das position von label nach dem Achsenbereich.

rx.recharts.label

Prop	Werte	Standard	Verwendung
`value`	Zeichenkette	-	Angezeigter Text
`position`	`"top"` `"left"` `"right"` `"bottom"` `"inside"` `"outside"` `"insideLeft"` `"insideRight"` `"insideTop"` `"insideBottom"` `"insideTopLeft"` `"insideBottomLeft"` `"insideTopRight"` `"insideBottomRight"` `"insideStart"` `"insideEnd"` `"end"` `"center"`	-	Stelle innerhalb des Elternbereichs
`offset`	Zahl	-	Abstand, um den der Text von dort weggeschoben wird
`view_box`	dict	automatisch	Bezugsbereich. Wird meist automatisch berechnet

rx.recharts.label_list

Prop	Werte	Standard	Verwendung
`data_key`	Spaltenname	-	Spalte mit den Werten für jeden Punkt
`position`	dieselben 18 wie bei `label`	-	Stelle relativ zu Balken oder Punkt
`offset`	Zahl	`5`	Abstand von dieser Stelle
`fill`	Farbe	`rx.color("gray", 10)`	Textfarbe
`stroke`	Farbe	`"none"`	Farbe der Textkontur

Werte je Reihe: label_list

label_list schreibt Text an jeden Datenpunkt der Reihe, in der es steckt. Bei zwei Balkenreihen bekommt jede ihr eigenes label_list, und data_key legt fest, welche Spalte geschrieben wird.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="pv", position="top"),
        data_key="pv",
        stroke="#82ca9d",
        fill="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    margin={"left": 10, "right": 0, "top": 20, "bottom": 10},
    data=label_data,
    width="100%",
    height=300,
)

Text gestalten

Gestaltung, für die label keine Prop hat, reichst du mit custom_attrs unverändert an Recharts weiter. Hier legst du Schriftgröße und -stärke fest und stellst den Namen der senkrechten Achse mit angle 270 entlang der Achse auf.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center", custom_attrs={"fontSize": "12px", "fontWeight": "700"}),
        data_key="name",
        height=60,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Views", position="left", custom_attrs={"angle": 270, "fontSize": "12px", "fontWeight": "700"}),
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 25},
    width="100%",
    height=300,
)

An Referenzlinien und -bereiche hängen

label kann außer an Achsen auch Kind von reference_line, reference_dot und reference_area sein. So beschriftest du eine Ziellinie mit „Goal“ oder benennst einen hervorgehobenen Abschnitt. Die Textfarbe legst du ebenfalls über fill in custom_attrs fest.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopRight", custom_attrs={"fill": rx.color("red", 11)}),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_area(
        rx.recharts.label(value="Campaign", position="insideTop"),
        x1="Page C",
        x2="Page E",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=label_data,
    width="100%",
    height=280,
)

Auftrag erledigt

Zwei label_list schreiben den Wert über die Balken und den Seitennamen unten in die Balken. Weil die Namen schon an den Balken stehen, wird die Achsenskala abgeschaltet, und unter der Achse bleibt nur ein label mit „Pages“.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        rx.recharts.label_list(data_key="name", position="insideBottom", fill="white", offset=10),
        data_key="uv",
        fill=rx.color("accent", 9),
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="insideBottom", custom_attrs={"fontWeight": "700"}),
        tick=False,
        height=30,
    ),
    data=label_data,
    margin={"top": 20},
    width="100%",
    height=280,
)

Werkstattnotizen

label setzt einen Text an eine Stelle, label_list einen Wert an jeden Datenpunkt.
label ist Kind von x_axis, y_axis oder reference_*, label_list Kind einer Reihe wie bar, line oder area.
Text und Stelle legst du mit value, position und offset fest. position kennt 18 Werte.
Gestaltung ohne eigene Prop (fontSize, fontWeight, angle) gibst du über custom_attrs weiter.

← Zurück

Diagrammbausteine · Legend

Weiter →

Diagrammbausteine · Reference

Ü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