Zum Inhalt springen
UI Kit
Accent

Vergleichs-Charts

Vorher und nachher, Rankings, Zielwerte, Anteile am Ganzen und Wasserfälle, die zeigen, wie aus einem Wert ein anderer wird.

5 Components · 22 Variants
Kategorie wechseln

Auf dieser Seite

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

comparison-chart

Vergleichsdiagramm

Zwei Zustände nebeneinander, als Steigungsdiagramm, Schmetterling, Balken in zwei Richtungen, A/B-Test mit Intervallen und Sicherheit oder als Reihen, die auf einer Achse bei 100 beginnen.

Props und Details · Vergleichsdiagramm

Steigung

Vorher und nachher als zwei Spalten, eine Linie je Eintrag. Die zwei größten Veränderungen behalten den Akzent, der Zeiger holt jede Linie nach vorn.

Im Studio öffnen

Schmetterling

Zwei Gruppen als Balken links und rechts einer gemeinsamen Beschriftung, jeder Wert am Ende seines Balkens.

Im Studio öffnen

In zwei Richtungen

Die Veränderung je Eintrag von einer Nulllinie aus, sortiert vom größten Plus zum größten Minus, Vorzeichen und Pfeil neben der Tönung.

Im Studio öffnen

A/B-Test

Zwei Versionen mit Abschlussrate und 95-%-Intervall auf einer Skala, das Plus und ein Satz, der sagt, wie sicher das Ergebnis ist.

Im Studio öffnen

Auf 100 gesetzt

Reihen sehr unterschiedlicher Größe am Start auf 100 gesetzt, so wird Wachstum auf einer Achse vergleichbar, ohne zweite Skala.

Im Studio öffnen

ranking-chart

Ranglistendiagramm

Wer vorn liegt und wie sich die Reihenfolge ändert. Als Lollipops, Bump-Chart der Plätze über die Zeit, Balkenrennen mit Abspielen und Regler, Punktdiagramm über mehrere Quellen oder Bestenliste mit Bewegung und Verlauf.

Props und Details · Ranglistendiagramm

Lollipop

Eine Rangliste als feine Stäbe mit Punkt, der Erste im Akzent, der Wert an jedem Punkt.

Im Studio öffnen

Bump-Chart

Plätze über sechs Monate als Linien, der Platz in jedem Punkt. Eine Linie behält den Akzent, der Zeiger holt jede andere nach vorn.

Im Studio öffnen

Balkenrennen

Balken, die sich Monat für Monat neu ordnen, sobald es hereinscrollt. Anhalten, noch einmal abspielen oder mit dem Regler zu jedem Monat springen.

Im Studio öffnen

Punktdiagramm

Bis zu drei Werte je Zeile als Punkte in Farbe und Form, eine Linie zwischen dem niedrigsten und dem höchsten, beide beim Zeigen benannt.

Im Studio öffnen

Bestenliste

Platz, die Bewegung seit letzter Woche mit Pfeil und Zahl, ein Anteilsbalken, ein kleiner Verlauf und der Wert.

Im Studio öffnen

bullet-chart

Bullet-Diagramm

Eine Kennzahl gegen ihr Ziel, dahinter Bereiche für schwach, mittel und gut, als Zeilen, stehende Säulen, in einer Tabelle oder als Kennzahlkarten. Ein erreichtes Ziel zeigt Haken und Wort, nicht nur Farbe.

Props und Details · Bullet-Diagramm

Zeilen

Ein Bullet je Kennzahl mit eigener Skala, rechts Wert und Anteil am Ziel.

Im Studio öffnen

Säulen

Stehende Bullets nebeneinander, eines je Monat, oben der Wert, darunter Haken oder Hinweis.

Im Studio öffnen

In einer Tabelle

Kleine Bullets in einer Tabelle mit Ist, Ziel und Stand. Auf dem Telefon klappt jede Zeile in zwei Zeilen.

Im Studio öffnen

Kennzahlkarten

Karten in einem Haarlinienraster mit der großen Zahl, dem Ziel, dem Bullet und wie weit es noch ist.

Im Studio öffnen

proportion-chart

Anteilsdiagramm

Anteile, die zusammen 100 % ergeben, als gestapelte Zeilen, Säulen für die Mischung über die Zeit, Marimekko, in dem die Breite das Gewicht ist, oder Umfrageantworten um eine neutrale Mitte.

Props und Details · Anteilsdiagramm

Gestapelte Zeilen

Ein 100-%-Balken je Zeile, dieselben Teile in derselben Reihenfolge, Anteile darin, wo sie passen. Die Legende holt einen Teil nach vorn.

Im Studio öffnen

Mischung über die Zeit

Eine 100-%-Säule je Monat, so zeigt sich eine Verschiebung der Mischung, auch wenn die Summe wächst.

Im Studio öffnen

Marimekko

Die Säulenbreite ist die Größe eines Segments, die Teile darin seine Mischung, so wiegt ein großes Segment so viel, wie es soll.

Im Studio öffnen

Umfrageantworten

Fünf Antworten von Ablehnung bis Zustimmung, die neutrale Mitte auf einer Linie, Zustimmung nach rechts und daneben der Saldo je Aussage.

Im Studio öffnen

waterfall-chart

Wasserfalldiagramm

Wie aus einem Anfangswert ein Endwert wird, Schritt für Schritt. Als Brücke, als Rechnung mit Zwischensummen, in Zeilen für lange Namen oder als Geld rein und raus mit dem Kontostand. Auf dem Telefon werden die Säulen zu Zeilen.

Props und Details · Wasserfalldiagramm

Brücke

Vom Vorjahr zum laufenden Jahr. Plus und Minus schweben auf dem Zwischenstand, feine Verbinder tragen ihn weiter.

Im Studio öffnen

Mit Zwischensummen

Ein Monat als Rechnung, mit Umsatz, Kosten in Gruppen und den Zwischensummen dazwischen wieder auf der Grundlinie.

Im Studio öffnen

Zeilen

Die Schritte als Zeilen, lange Namen links, die Veränderung am Ende jedes Balkens. Geht mit jeder Einheit, hier Millisekunden.

Im Studio öffnen

Zahlungsfluss

Einnahmen über und Ausgaben unter der Nulllinie je Monat, der Kontostand als Linie auf derselben Skala.

Im Studio öffnen

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Vergleichs-Charts stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert