Charts (Pro)
Diagramme sind Werkzeuge zur Datenvisualisierung, die komplexe Datensätze vereinfacht darstellen und die Analyse sowie das Erkennen von Mustern und Trends auf einen Blick ermöglichen.
Overview
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Intro
Diagramme sind ein kraftvolles Mittel, um komplexe Daten auf einen Blick verständlich zu machen. Damit sie ihren Zweck optimal erfüllen, stehen Klarheit, Lesbarkeit und Interaktivität im Vordergrund.
Bar Chart (Default)
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| - wenn Daten strukturiert aufbereitet und schnell erfasst werden sollen. - wenn Trends, Muster oder Entwicklungen innerhalb eines Datensatzes sichtbar gemacht werden sollen. - wenn Zusammenhänge und Unterschiede zwischen mehreren Datenpunkten anschaulich dargestellt werden sollen. - wenn Zahlen und Fakten so präsentiert werden sollen, dass sie auch für ein breiteres Publikum verständlich sind. - wenn komplexe Daten in leicht zugängliche und visuell ansprechende Form gebracht werden sollen. | - wenn die Datenmenge zu klein ist, um aussagekräftige Muster oder Trends zu zeigen. - wenn Textinformationen oder detaillierte Beschreibungen der einzelnen Daten wichtiger sind als eine visuelle Darstellung. - wenn die Daten nur schwer oder missverständlich visualisiert werden können. - wenn eine genaue, präzise Darstellung einzelner Werte und nicht deren Vergleich oder Entwicklung im Fokus steht. - wenn die visuelle Darstellung die Daten vereinfacht oder verzerrt und dadurch zu Fehlschlüssen führen könnte. |
Guidelines
WARNING
Bei dieser Komponente handelt es sich um eine Vaadin Pro Komponente . Während der Großteil unseres Design Systems auf Open-Source-Komponenten basiert, ist hierfür eine gültige kommerzielle Vaadin-Lizenz erforderlich.
Aufbau
Alle Charts bestehen mindestens aus einem Bereich, in dem Daten abgebildet werden.
Je nach Art des Diagramm gibt es zusätzlich Achsenbeschriftungen oder prozentuale Beschriftungen von Anteilen.
Zu jedem Chart können Legenden und on-hover Tooltips hinzugefügt werden.
Varianten/Typen
Column-Chart (Säulendiagramm)
Säulendiagramme kommen bei jeder Art von zeitlichen Entwicklungen (z.B. Umsatz oder Anzahl Tickets in einer monatlichen Entwicklung) zum Einsatz.
Im Vordergrund stehen die Einzelwerte (Säulen). Soll der Trend im Vordergrund stehen, ist das Line-Chart besser geeignet.
 | Default |
 | Stacked |
 | Grouped |
Bar-Chart (Balkendiagramm)
Bar-Charts teilen einen Gesamtwert auf unterschiedliche Kategorien auf. Sie werden für den Vergleich von Kategorien verwendet, um zum Beispiel verschiedene Vertriebsgebiete oder Produktgruppen im Verhältnis zueinander darzustellen.
Es können sowohl absolute als auch prozentuelle Kennzahlen abgebildet werden.
Grundsätzlich empfiehlt sich eine wertmäßig absteigende Sortierung.
Bei langer Achsenbeschriftung können Bar-Charts unleserlich werden. In dem Fall kann ein Column-Chart verwendet werden.
| Default |
 | Stacked |
 | Grouped |
Line-Chart
Das Line-Chart dient vor allem zur Visualisierung von Trends und Entwicklungen über längere Zeiträume , da es sich für die Darstellungen einer größeren Anzahl an Werten eignet.
Um Übersichtlichkeit zu gewährleisten, sollten maximal acht Datenreihen dargestellt werden. Je nach Überschneidung kann die maximale Anzahl deutlich geringer sein.
Pie-Chart
Das Pie-Chart stellt die Beziehung zwischen einzelnen Anteilen eines Ganzen dar. Verwende das Pie-Chart, wenn spezifische Zahlen und Prozentsätze nicht relevant sind, sondern der Fokus auf Beziehungen von Anteilen zueinander liegt.
Sind mehrere Anteile eines Pie-Charts ähnlich groß, ist ein Bar-Chart besser geeignet, da dort feine Unterschiede besser zu erkennen sind.
Donut-Chart
Das Donut-Chart ist eine Art des Pie-Chart.
Donut-Charts zeigen ebenfalls Beziehungen und Verhältnisse von Anteilen eines Ganzen. Sie wirken allerdings weniger wuchtig, da sie auf gleicher Fläche wie das Pie-Chart weniger Farbe beinhalten.
X-Range-Chart
Das X-Range-Chart beschreibt Zeiträume auf der X-Achse. Es eignet sich besonders gut für die Darstellung von mehreren zeitlichen Abläufen im Verhältnis zueinander , wobei sich zeitliche Abläufe auch überschneiden können, wie zum Beispiel bei einem Lebenslauf oder bei Projektplanung.
Barrierefreiheit
Die Informationen aus den Charts sollten auch auf eine nicht-visuelle Art kommuniziert werden.
Je nach Anwendungsfall bieten sich dafür verschiedenen Lösungen an.
Folgende Möglichkeiten stehen zur Verfügung:
- Neben dem Chart wird eine Tabelle angezeigt, die die Werte des Charts beinhaltet
- In den Einstellungen können Nutzende angeben, ob sie ein Chart oder eine Tabelle mit den Werten sehen möchten
- Über dem Chart gibt es einen Button, mit dem zwischen der Chart- und Tabellenansicht hin und her gewechselt werden kann