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

Chart Tooltip

rx.recharts.graphing_tooltip

Offizielle Doku

Werkstattauftrag

Bitte beim Überfahren eines Balkens mit der Maus ein kleines Kästchen mit Name und Wert zeigen, etwa „Sales - 4000 won“.

rx.recharts.graphing_tooltip ist das kleine Kästchen, das erscheint, wenn du mit der Maus über einen Punkt oder Balken im Diagramm fährst. Du setzt es nur als Kind ins Diagramm, und schon zeigt es den x-Wert unter der Maus und die Werte aller Reihen an dieser Stelle. rx.recharts.tooltip ist dieselbe Komponente.

Mit rx.tooltip (dem Overlay für Text oder Buttons) hat es nichts zu tun. Innerhalb von Diagrammen nimmst du die Komponente von dieser Seite.

ctooltip_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": 9800, "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.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=ctooltip_data,
    width="100%",
    height=300,
)

Props ausprobieren

Lass die Maus über dem Diagramm und ändere dabei die Werte. Ab dem nächsten Beispiel wird das oben angelegte ctooltip_data weiterverwendet.

Props ausprobieren

separator

cursor

is_animation_active

animation_easing

background

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="pv", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" : ",
        cursor=True,
        is_animation_active=True,
        animation_easing="ease",
        content_style={"background": rx.color("gray", 2), "borderRadius": "8px"},
    ),
    data=ctooltip_data,
    width="100%",
    height=260,
)

separator ist der Text zwischen Name und Wert. Ohne cursor verschwindet der graue Streifen unter der Maus.

Prop	Werte	Standard	Verwendung
`separator`	Zeichenkette	`":"`	Text zwischen Name und Wert
`cursor`	`True` / `False`, dict	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`	Hervorhebungsstreifen unter der Maus. Bei `False` keiner
`content_style`	style-dict	grauer Hintergrund, abgerundete Ecken	Gestaltung des inneren Kästchens
`wrapper_style`	style-dict	`{}`	Gestaltung des äußeren Elements um das Kästchen
`item_style` · `label_style`	style-dict	Schrift Grau 12 · Grau 11	Gestaltung einer Wertzeile (li) und des x-Werts oben (p)
`position`	`{"x": …, "y": …}`	-	Wenn gesetzt, bleibt das Kästchen an dieser Stelle
`offset`	Zahl	`10`	Abstand zwischen Maus und Kästchen
`allow_escape_view_box`	`{"x": bool, "y": bool}`	beide `False`	Ob das Kästchen den Diagrammbereich verlassen darf
`view_box`	`{"x", "y", "width", "height"}`	automatisch	Bereich, in dem das Kästchen bleibt. Wird meist automatisch berechnet
`filter_null`	`True` / `False`	`True`	Ob Reihen ohne Wert (None) weggelassen werden
`active`	`True` / `False`	automatisch	Erzwungen anzeigen oder verbergen
`is_animation_active` · `animation_duration` · `animation_easing`	bool · ms · Name der Easing-Funktion	`True` · `1500` · `"ease"`	Animation, mit der das Kästchen der Maus folgt

Gestaltung und feste Position

wrapper_style gestaltet die äußere Hülle, content_style das innere Kästchen. item_style gilt für eine Wertzeile, label_style für den x-Wert oben. Alle sind dicts mit CSS-Eigenschaften in camelCase.

Mit position folgt das Kästchen nicht mehr der Maus, sondern bleibt an seiner Stelle. allow_escape_view_box legt für x und y getrennt fest, ob das Kästchen den Diagrammbereich verlassen darf, und view_box ist die Größe des Bereichs, in dem es bleibt.

rx.recharts.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        view_box={"width": 675, "height": 300},
        allow_escape_view_box={"x": True, "y": False},
        wrapper_style={"backgroundColor": rx.color("accent", 3), "borderRadius": "8px", "padding": "10px"},
        content_style={"backgroundColor": rx.color("accent", 4), "borderRadius": "4px", "padding": "8px"},
        item_style={"color": rx.color("accent", 11)},
        label_style={"fontWeight": "bold"},
        position={"x": 80, "y": 0},
        is_animation_active=False,
    ),
    data=ctooltip_data,
    width="100%",
    height=300,
)

Leere Werte: filter_null

Enthalten die Daten None, lässt der Standard (filter_null=True) diese Reihe im Kästchen weg (links). Mit False bleibt der Name stehen, nur der Wert ist leer (rechts). Fahr zum Vergleich über Tue und Thu.

ctooltip_gaps = [
    {"day": "Mon", "shop": 120, "online": 80},
    {"day": "Tue", "shop": 150, "online": None},
    {"day": "Wed", "shop": 90, "online": 110},
    {"day": "Thu", "shop": None, "online": 130},
    {"day": "Fri", "shop": 170, "online": 140},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(filter_null=False),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Auftrag erledigt

Gibst du einer Reihe name, steht im Kästchen dieser Name statt uv; mit unit folgt dem Wert eine Einheit. Das Trennzeichen wird " - ", und der Streifen unter der Maus bekommt die Akzentfarbe.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Sales", unit=" won", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        cursor={"fill": rx.color("accent", 3)},
        content_style={"background": rx.color("gray", 1), "border": "none", "borderRadius": "10px", "boxShadow": "0 4px 14px rgba(0,0,0,0.12)"},
        item_style={"color": rx.color("accent", 11), "fontWeight": "bold"},
    ),
    data=ctooltip_data,
    width="100%",
    height=280,
)

Werkstattnotizen

graphing_tooltip (oder recharts.tooltip) als Kind ins Diagramm setzen, fertig. Nicht dasselbe wie rx.tooltip.
Name und Einheit im Kästchen kommen aus name und unit der Reihe.
Gestaltung mit separator, cursor, content_style, wrapper_style, item_style und label_style.
position fixiert das Kästchen, allow_escape_view_box lässt es über das Diagramm hinaus.
Mit filter_null=False bleibt auch bei Reihen mit None der Name stehen.

← Zurück

Diagrammbausteine · Cartesian Grid

Weiter →

Diagrammbausteine · Legend

Ü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