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

Area Chart

rx.recharts.area_chartrx.recharts.area

Offizielle Doku

Werkstattauftrag

Stapel die monatlichen Besucherzahlen von Web und App so, dass der Gesamtverlauf und der Anteil jedes Kanals auf einen Blick zu sehen sind.

rx.recharts.area_chart ist ein Flächendiagramm: Die Fläche unter der Linie wird eingefärbt. Es eignet sich, um zu zeigen, wie sich eine Menge über die Zeit verändert und wie groß die Summe mehrerer Werte ist. Du gibst dem Diagramm-Container (area_chart) die Daten und legst die zu zeichnenden Reihen (area) und die Achsen als Kinder hinein.

Die Daten sind eine Liste von Dicts. Jedes Dict ist ein Schritt auf der x-Achse, und data_key ist der Schlüssel, der festlegt, welcher Wert aus dem Dict gezeichnet wird. Alle Beispiele auf dieser Seite verwenden das folgende areachart_data.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="web"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=areachart_data,
    width="100%",
    height=250,
)

width und height des Diagramms nehmen nur Zahlen (Pixel) oder Prozent-Strings wie "100%" an. CSS-Einheiten wie "20em" gibst du der umschließenden Box. Achsen (x_axis, y_axis), Raster, Tooltip und Legende werden auf den Seiten zu den Diagrammbausteinen ausführlich behandelt; hier nutzen wir nur so viel wie nötig.

Props ausprobieren

Die beiden Flächen sind mit stack_id="1" gestapelt. Ändere Kurvenform, Farbe, Linienstärke, Punkte und Stapelart. Die Daten sind das areachart_data von oben.

Props ausprobieren

curve

color

stroke_width

dot

stack_offset

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        type_="monotone",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    stack_offset="none",
    width="100%",
    height=250,
)

type_ legt fest, wie die Punkte verbunden werden. Mit stack_offset=expand ergibt jeder Monat in Summe 100 %, und man sieht nur noch die Anteile.

Prop	Werte	Standard	Verwendung
`area_chart(data=)`	Liste von Dicts	keiner	Daten für das ganze Diagramm
`area_chart(width=, height=)`	Zahl oder `"100%"`	`"100%"`	Diagrammgröße. Die Höhe gibst du am sichersten als Zahl an
`area_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Verlauf waagerecht oder senkrecht
`area_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	keiner	Wie die Grundlinie gestapelter Flächen berechnet wird
`area_chart(sync_id=)`	String	keiner	Diagramme mit gleichem Wert bewegen Tooltip und Brush gemeinsam
`area_chart(margin=)`	`{"top": 5, ...}`	keiner	Abstand rund um das Diagramm
`area_chart(base_value=)`	Zahl, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	Bodenwert, an dem die Fläche beginnt
`area(data_key=)`	String	keiner	Schlüssel des zu zeichnenden Werts
`area(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	`"monotone"`	Interpolation der Kurve
`area(stroke=, fill=)`	Farbe	accent 9 / accent 5	Linien- und Füllfarbe
`area(stroke_width=)`	Zahl	`1`	Linienstärke
`area(dot=, active_dot=)`	`True` / `False` / Dict	`False` / accent-Punkt	Punkte anzeigen, Punkt beim Überfahren mit der Maus
`area(stack_id=)`	String	keiner	Flächen mit gleichem Wert werden aufeinandergestapelt
`area(name=, unit=)`	String	`data_key`	Name und Einheit in Tooltip und Legende
`area(connect_nulls=)`	`True` / `False`	`False`	Leere Werte (`None`) überspringen und durchgehend zeichnen
`area(x_axis_id=, y_axis_id=)`	String/Zahl	`0`	An welche Achse die Fläche gebunden ist
`on_click` `on_mouse_enter` …	Event		Diagramm und Fläche nehmen beide Events an. `area` hat zusätzlich `on_animation_start` und `on_animation_end`

Gestapelte Flächen (stack_id)

areas mit derselben stack_id werden von unten nach oben aufeinandergestapelt. Die oberste Kante ist dann die Summe, sodass du Gesamtgröße und Einzelteile gleichzeitig ablesen kannst. stack_offset bestimmt die Stapelbasis: Meist nimmt man "none", für reine Anteile "expand".

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 6),
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 6),
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=areachart_data,
    stack_offset="none",
    margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

Mit Farbverlauf füllen

Ist die Fläche oben kräftig und unten transparent, tritt die Linie deutlicher hervor. Definiere im Diagramm mit rx.el.svg.defs einen SVG-Farbverlauf und verweise mit fill="url(#id)" darauf. Wähle die id des Verlaufs so, dass sie auf der Seite nur einmal vorkommt.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_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.8),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0),
            id="areachart_gradient",
            x1=0,
            x2=0,
            y1=0,
            y2=1,
        ),
    ),
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill="url(#areachart_gradient)",
        type_="natural",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    width="100%",
    height=280,
)

Mehrere Achsen

Willst du zwei Werte völlig unterschiedlicher Größenordnung in ein Diagramm zeichnen, nimm zwei Achsen. Gib den Achsen mit y_axis_id einen Namen und verbinde jede area über dieselbe y_axis_id. Für die x-Achse funktioniert das genauso mit x_axis_id. Zwei Skalen verwirren Leser allerdings leicht, nutze das also nur, wenn die Einheiten wirklich verschieden sind.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 5),
        y_axis_id="left",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=280,
)

Hochkant drehen (layout)

Mit layout="vertical" verläuft die Fläche von oben nach unten. Dabei tauschen die Achsen ihre Rollen: Die x-Achse wird zur Zahlenachse (type_="number"), die y-Achse zur Kategorienachse (type_="category"). Damit keine Beschriftung abgeschnitten wird, gibst du am besten margin in alle vier Richtungen.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 3),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="month", type_="category"),
    data=areachart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "bottom": 20, "left": 20},
    width="100%",
    height=300,
)

Diagramme koppeln (sync_id)

Diagramme mit derselben sync_id teilen sich Tooltip-Position und Brush-Bereich. Fährst du mit der Maus über das obere Diagramm, erscheint auch im unteren der Tooltip für denselben Monat; verkleinerst du mit dem Brush unten den Bereich, zieht das obere Diagramm mit. Auch Balken-, Linien- und Verbunddiagramme lassen sich so koppeln.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.vstack(
    rx.recharts.area_chart(
        rx.recharts.area(data_key="web", stroke=rx.color("accent", 9), fill=rx.color("accent", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=180,
    ),
    rx.recharts.area_chart(
        rx.recharts.area(data_key="app", stroke=rx.color("teal", 9), fill=rx.color("teal", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        rx.recharts.brush(data_key="month", height=24),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=210,
    ),
    width="100%",
)

Ein Diagramm, das State bewegt

Gibst du data einen State-Wert, wird das Diagramm bei jeder Änderung mit Animation neu gezeichnet. Hier ändern sich die Zahlen per Klick auf den Button oder eine Fläche, und über die Auswahlbox wird auch type_ im State umgestellt. Weist du die Liste komplett neu zu, kommt die Änderung zuverlässig an.

import random
from typing import Any


class AreaChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"month": "Jan", "web": 4000, "app": 2400},
        {"month": "Feb", "web": 3000, "app": 1398},
        {"month": "Mar", "web": 2000, "app": 5800},
        {"month": "Apr", "web": 2780, "app": 3908},
        {"month": "May", "web": 1890, "app": 4800},
        {"month": "Jun", "web": 2390, "app": 3800},
    ]
    curve: str = "monotone"

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

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=AreaChartLiveState.shuffle),
        rx.select(
            ["monotone", "linear", "natural", "step", "basis"],
            value=AreaChartLiveState.curve,
            on_change=AreaChartLiveState.set_curve,
        ),
    ),
    rx.recharts.area_chart(
        rx.recharts.area(
            data_key="web",
            type_=AreaChartLiveState.curve,
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.area(
            data_key="app",
            type_=AreaChartLiveState.curve,
            stroke=rx.color("teal", 9),
            fill=rx.color("teal", 5),
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.legend(),
        data=AreaChartLiveState.data,
        width="100%",
        height=300,
    ),
    width="100%",
)

Auftrag erledigt

Beide Flächen sind mit derselben stack_id gestapelt und nach unten hin mit einem Farbverlauf aufgehellt. Mit name bekommen Legende und Tooltip lesbare Namen, und weil nur das waagerechte Raster bleibt, wirkt das Ganze ruhig.

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_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.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.1),
            id="areachart_order_web",
            x1=0, x2=0, y1=0, y2=1,
        ),
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("teal", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("teal", 9), stop_opacity=0.1),
            id="areachart_order_app",
            x1=0, x2=0, y1=0, y2=1,
        ),
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.area(
        data_key="web",
        name="Web",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        fill="url(#areachart_order_web)",
        stack_id="visits",
    ),
    rx.recharts.area(
        data_key="app",
        name="App",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        fill="url(#areachart_order_app)",
        stack_id="visits",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=300,
)

Werkstattnotizen

In area_chart(data=Liste) kommen area(data_key=…) sowie x_axis und y_axis als Kinder.
width und height nur als Zahl oder Prozent-String. CSS-Einheiten gehören an die äußere Box.
Gleiche stack_id stapelt, stack_offset="expand" macht daraus ein 100-%-Anteilsdiagramm.
Farbverläufe definierst du in rx.el.svg.defs und nutzt sie mit fill="url(#id)".
sync_id koppelt die Tooltips mehrerer Diagramme, und ein State-Wert in data erweckt das Diagramm zum Leben.

← Zurück

Tabellen und Datengrids · Data Editor

Weiter →

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