Zum Inhalt springen
UI Kit
Accent

React Diagramme für Linie, Balken, Fläche und Donut

Line, Bar, Area und Donut, radiale Charts, Heatmaps und Funnels für die alltäglichen Zahlen.

7 Components · 22 Variants
Kategorie wechseln

Die Alltagsdiagramme, für alle lesbar

Diagramme machen aus Zahlenreihen etwas, das man in einer Sekunde erfasst. Die sieben Chart Components hier zeichnet das Kit selbst in SVG, sie nehmen deine Daten als einfache Zeilen und formatieren jede Zahl in der Sprache der Seite. Jedes behält eine Datentabelle für Screenreader und lässt sich mit den Pfeiltasten Wert für Wert durchgehen.

Das Liniendiagramm zeigt einen Verlauf über die Zeit, mit mehreren Reihen oder diesem Jahr gegen das letzte. Das Balkendiagramm vergleicht Kategorien, gruppiert, gestapelt oder waagerecht für lange Beschriftungen. Das Flächendiagramm betont Mengen. Das Ringdiagramm zeigt Anteile am Ganzen, am besten mit höchstens fünf Teilen. Das Kreisdiagramm für Zyklen passt zu Daten im Kreis, etwa Stunden eines Tages. Die Heatmap zeigt Muster über Wochen, der Trichter den Verlust zwischen den Schritten zum Ziel.

Wähle das Diagramm nach der Frage, ein Verlauf will eine Linie, eine Rangfolge Balken. Lass Balkenachsen bei null beginnen. Nutze den Akzent für die Reihe, auf die es ankommt, und ruhige Töne für den Rest. Die Diagramme lesen die Tokens des Kits, Dark Mode und Markenfarbe greifen von selbst.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

bar-chart

Balkendiagramm

Säulen und Balken mit gerundetem Datenende, 2 px Abstand in Flächenfarbe, Werten wo sie passen, Tooltips und Pfeiltasten.

Props und Details · Balkendiagramm

Einfach

Eine Reihe, Werte auf den Säulen, der stärkste Tag behält den Akzent.

Gruppiert

Zwei Jahre nebeneinander je Quartal, das laufende im Akzent.

Gestapelt

Drei Kanäle gestapelt zur Monatssumme, getrennt durch eine feine Lücke in Flächenfarbe.

Waagerecht

Lange Kategorien links, Balken nach Größe sortiert, der Wert an jeder Spitze.

line-chart

Liniendiagramm

Eine oder mehrere Linien über die Zeit, mit runden Achsenwerten, Fadenkreuz, Pfeiltasten und Datentabelle für Screenreader.

Props und Details · Liniendiagramm

Eine Reihe

Eine weiche Linie im Akzent, der letzte Punkt markiert und beschriftet.

Mehrere Reihen

Drei Quellen in Akzent, Grau und hellem Akzentton, mit Legende und einem Tooltip für alle.

Dieses und letztes Jahr

Das laufende Jahr im Akzent, das Vorjahr als ruhige, gestrichelte graue Linie.

Gerade mit Punkten

Gerade Abschnitte und ein Punkt je Monat, für Zählwerte, bei denen jeder Punkt zählt.

radial-chart

Kreisdiagramm für Zyklen

Daten, die sich im Kreis drehen: 24 Stunden als Uhr, zwölf Monate als Rose mit ehrlichen Flächen, Wochentage nach Stunde als Ring-Heatmap und Gruppen mit ihren Teilen als Sunburst.

Props und Details · Kreisdiagramm für Zyklen

Stundenuhr

Vierundzwanzig Balken um ein Zifferblatt ab Mitternacht, die stärkste Stunde im Akzent und in der Mitte benannt.

Im Studio öffnen

Monatsrose

Zwölf Keile ab Januar, die Fläche jedes Keils ist der Wert, so wirkt der Sommer nicht größer, als er ist.

Im Studio öffnen

Ring-Heatmap

Sieben Ringe für die Wochentage, 24 Segmente für die Stunden, fünf Akzentstufen für den Wert. Pfeiltasten gehen im Kreis und zwischen den Ringen.

Im Studio öffnen

Sunburst

Gruppen innen, ihre Teile außen. Ein Teil hebt seinen ganzen Pfad hervor, die Liste daneben wählt eine Gruppe.

Im Studio öffnen

area-chart

Flächendiagramm

Eine Linie mit ruhiger Fläche darunter, als Tönung, Verlauf oder gestapelte Bänder mit Lücke in Flächenfarbe.

Props und Details · Flächendiagramm

Einfach

Tageswerte mit gleichmäßiger Tönung im Akzent, die Wochenenden fallen von selbst auf.

Verlauf

Die Tönung läuft zur Grundlinie aus, die Linie bleibt oben klar.

Gestapelt

Drei Kanäle gestapelt zur Wochensumme, der Tooltip rechnet sie zusammen.

donut-chart

Ringdiagramm

Anteile als Ring oder halber Tacho, die Summe in der Mitte, Legende mit Werten und Anteilen.

Props und Details · Ringdiagramm

Ring mit Legende

Drei Anteile, die Summe in der Mitte. Zeigen oder Pfeiltasten holen den Anteil in die Mitte.

Halber Tacho

Ein halber Ring gegen eine Kapazität, der freie Rest bleibt als ruhige Spur.

Kompaktes Paar

Zwei kleine Ringe nebeneinander, Legenden darunter, nur Anteile.

funnel

Trichter

Schritte vom ersten Besuch bis zum Ziel, mit dem Anteil am Start und dem Übergang zwischen je zwei Schritten.

Props und Details · Trichter

Schritte nebeneinander

Schritte nebeneinander, der Fluss dazwischen als helles Band, die Rate obenauf. Auf dem Telefon werden daraus Zeilen.

Zeilen

Eine Zeile je Schritt mit Balken gegen den Start, dazwischen Rate und Absprung.

heatmap

Heatmap

Werte als getönte Zellen in fünf Akzentstufen, als Kalender aus Wochen oder beschriftete Matrix. Pfeiltasten wandern durch die Zellen.

Props und Details · Heatmap

Kalender

Ein halbes Jahr in Wochen, Monate oben, Wochentage an der Seite. Auf dem Telefon bleiben die jüngsten Wochen.

Matrix

Wochentage mal Öffnungszeiten, Beschriftung an beiden Achsen, ein Tooltip je Zelle.

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Charts stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert