Der Donut Chart gehört zu den beliebtesten Visualisierungstypen, wenn es darum geht, Anteile und Verteilungen auf kompakte Weise darzustellen. Obwohl er oft mit dem klassischen Kreisdiagramm verwechselt wird, bietet der Donut Chart durch die zentrale Lücke zusätzliche Freiräume für Beschriftungen, Legenden oder ergänzende Kennzahlen. In diesem Leitfaden erfahren Sie, wie ein Donut Chart funktioniert, wann er sinnvoll eingesetzt wird, welche Designprinzipien dahinterstehen und wie Sie ihn in gängigen Tools erstellen, optimieren und barrierefrei gestalten. Ob Sie Daten aus dem Vertrieb, der Marktforschung oder dem Web-Analytics-Bereich visualisieren möchten – dieser Artikel liefert praxisnahe Anleitungen, Beispiele und Best Practices.
Was ist ein Donut Chart und warum lohnt sich der Einsatz?
Ein Donut Chart ist eine Variante des Kreisdiagramms, bei dem die einzelnen Segmente wie Kuchenstücke einen Anteil an einer Gesamtmenge repräsentieren. Die zentrale Öffnung – das Loch – dient nicht nur optischen Zwecken, sondern ermöglicht auch eine klare Platzierung von Beschriftungen, Stichworten oder weiteren Kontextinformationen. Der Donut Chart ist besonders geeignet, wenn es darum geht, mehrere Kategorien und deren relative Größen zu vergleichen, ohne die Achsen einer herkömmlichen Balken- oder Linien-Diagramm-Visualisierung zu benötigen.
Vorteile eines Donut Chart
- Intuitive Darstellung von Anteilen in Prozenten oder Verhältnissen
- Platz für zusätzliche Kontextinformationen in der Mitte des Diagramms
- Gutes Verhältnis von Übersichtlichkeit zu Detailtiefe bei wenigen bis mittleren Kategorien
- Eignet sich gut für Dashboards, bei denen Platz knapp ist
Wann lieber verzichten?
- Bei sehr vielen Kategorien (> 6–8) wird ein Donut Chart schnell unübersichtlich.
- Wenn präzise Vergleiche zwischen vielen Segmenten erforderlich sind, eignen sich Balken- oder Säulendiagramme besser.
- Wenn die Werte absolut statt prozentual dargestellt werden müssen, kann ein anderes Diagramm geeigneter sein.
Donut Chart vs. Pie Chart: Unterschiede und Einsatzfälle
Der Donut Chart wird oft als Weiterentwicklung des Pie Chart verstanden. Der Kernunterschied liegt in der Zentralöffnung, die Platz für Beschriftungen oder zentrale Kennzahlen bietet. In der Praxis bedeuten diese Unterschiede:
- Pie Chart: Alle Segmente schließen direkt aneinander, keine zentrale Freifläche. Gut für wenige Kategorien, aber scrollbar weniger flexibel für zusätzliche Informationen.
- Donut Chart: Offener Kreis ermöglicht eine zentrale Beschriftung oder KPI (Key Performance Indicator) im Diagramm selbst. Bietet mehr Layoutfreiheit und kann komplexere Kontextinformationen aufnehmen.
Designprinzipien: Klarheit, Farbwahl und Lesbarkeit
Die Qualität eines Donut Chart hängt stark von Designentscheidungen ab. Hier finden Sie fundamentale Prinzipien, die Sie beim Erstellen beachten sollten.
Farbgestaltung
Wählen Sie Farbtöne mit ausreichender Kontrastwirkung zueinander. Verwenden Sie eine sinnvolle Farbpalette, die farblich heterogene Segmentfarben bietet, aber dennoch farblich kompatibel bleibt. Vermeiden Sie zu ähnliche Töne in nah beieinander liegenden Segmenten, damit Unterschiede leicht erkennbar bleiben. Verwenden Sie konsistente Farben über mehrere Diagramme hinweg, insbesondere in Dashboards, damit Benutzer Muster schneller erkennen können.
Beschriftung und Legende
Beschriftungen sollten klar, kurz und lesbar sein. Es ist sinnvoll, Legendenpositionen zu prüfen: Legende rechts oder unten könnte bei vielen Segmenten Platz beanspruchen. Die zentrale Beschriftung im Donut Chart kann eine Gesamtsumme oder relevante Kennzahl darstellen. Achten Sie darauf, dass Beschriftungen nicht mit dem Diagramm in Konflikt geraten und genug Abstand zu den Segmenten haben, um Verwechselungen zu vermeiden.
Proportionen und Innenradius
Der Innenradius bestimmt, wie groß das Loch im Donut Chart ist. Ein zu kleines Loch kann das Diagramm unruhig wirken lassen, während ein zu großes Loch die Segmente verkleinert und deren Genauigkeit beeinträchtigt. Ein gängiger Richtwert liegt zwischen 40 und 60 Prozent des äußeren Radius, abhängig von der Anzahl der Segmente und der verfügbaren Beschriftungsfläche.
Beschriftungs- und Pfeilführung
Vermeiden Sie Überlappungen von Beschriftungen. Wenn Segmente eng beieinander liegen, nutzen Sie Abstands- oder Absplitterungsindikatoren, Pfeile oder eine interaktive Tooltipps, die bei Hover erscheinen. Interaktive Donut Chart-Varianten verbessern die Leserlichkeit erheblich – insbesondere bei komplexeren Datensätzen.
Daten vorbereiten: Von Rohdaten zum Donut Chart
Eine solide Donut Chart-Darstellung beginnt mit gut vorbereiteten Rohdaten. Typischerweise benötigen Sie eine Sammlung von Kategorien (Labels) und zugehörigen Werten (Größenanteilen). Die Werte sollten sinnvoll normalisiert sein, sodass die Summe der Segmente die Gesamtmenge widerspiegelt.
Typische Datenstruktur
// Beispielhafte Datenstruktur
[
{ "label": "Kategorie A", "value": 40 },
{ "label": "Kategorie B", "value": 25 },
{ "label": "Kategorie C", "value": 20 },
{ "label": "Kategorie D", "value": 15 }
]
Beachten Sie, dass prozentuale Werte oft hilfreich sind, um Vergleiche zu erleichtern. Falls Ihre Daten bereits als Prozentsätze vorliegen, können Sie die Werte direkt verwenden, solange die Summe 100 ergibt.
Datenvalidierung
- Stellen Sie sicher, dass alle Werte numerisch sind und keine negativen Zahlen auftreten.
- Überprüfen Sie, ob die Summe der Werte der gewünschten Gesamtgröße entspricht (z. B. 100% oder eine sumierte absolute Zahl).
- Normalisieren Sie, falls erforderlich, damit die Prozentsätze korrekt berechnet werden können.
Umsetzung in gängigen Tools: Schritt-für-Schritt-Anleitungen
Im Folgenden finden Sie praxisnahe Anleitungen, wie Sie einen Donut Chart in gängigen Tools erstellen. Dabei werden zentrale Aspekte wie Datenentwicklung, Achsenführung und Legenden mit Blick auf optimale Leserlichkeit berücksichtigt.
Donut Chart in Microsoft Excel
Excel bietet einfache Optionen, um schnell einen Donut Chart aus einer Datentabelle zu erstellen. Hier ist eine kompakte Schritt-für-Schritt-Anleitung:
- Bereiten Sie Ihre Tabelle vor: Spalte A mit Labels, Spalte B mit Werten (Summe ggf. 100).
- Markieren Sie die Datenbereiche (Labels und Werte).
- Wählen Sie Einfügen > Diagramm > Donut. Excel erzeugt ein standardisiertes Donut Chart.
- Formatieren Sie das Diagramm: Innenradius anpassen, Farben festlegen, Legende positionieren.
- Nutzen Sie die zentrale Beschriftung, um Gesamtsumme oder zentrale KPI anzuzeigen. Klicken Sie auf das Loch, um Text zu hinzufügen.
- Falls nötig, fügen Sie Datenbeschriftungen zu den Segmenten hinzu (Werte oder Prozentsätze).
Tipps:
- Für Lesbarkeit: Limitieren Sie die Anzahl der Segmente auf höchstens 6–8; bei mehr Segmenten verwenden Sie eine Sortierung oder eine aggregierte „Andere“-Kategorie.
- Nutzen Sie konsistente Farben über Dashboards hinweg, damit User Muster erkennen können.
Donut Chart in Google Sheets
Google Sheets bietet ähnliche Funktionen wie Excel. So gehen Sie vor:
- Bereiten Sie Ihre Daten in zwei Spalten vor: Label und Wert.
- Markieren Sie die Zellen und wählen Sie Einfügen > Diagramm.
- Im Diagramm-Editor wählen Sie Diagrammtyp: Donut Chart. Falls nötig, wechseln Sie zu „Kreisdiagramm“ und aktivieren Sie „Donut“.
- Passen Sie Innenradius, Farben und Beschriftungen an. Nutzen Sie die zentrale Beschriftung für die Gesamtsumme oder KPI.
Donut Chart in Tableau
Tableau unterstützt Donut Charts über eine kombinierte Berechnung. Grundidee:
- Dimensionen (Labels) und Messwerte (Werte) in die Spalten/Zeilen ziehen.
- Berechnung für den Donut erstellen, z. B. Summe der Werte als Gesamtwert.
- Diagrammtyp auf Kreis ändern und Lochgröße durch die Dual-Axis-Technik erzeugen.
- Farben, Legende und Tooltipps anpassen, um eine klare Interpretation zu ermöglichen.
Donut Chart in Power BI
Power BI bietet integrierte Visualisierungen für Donut Charts. So gelingt die Umsetzung:
- Datentabelle in Power BI importieren (Labels + Werte).
- Donut Chart aus Visualisierungen auswählen.
- Werte in Werte-Feld, Labels in Legende ziehen.
- Zentrumstext verwenden (über ein Maß) für Gesamtsumme oder zentrale KPI.
Donut Chart mit JavaScript – D3.js
Für interaktive Donut Charts auf Webseiten ist D3.js eine beliebte Wahl. Ein einfaches Muster:
// Pseudocode: D3 Donut Chart Grundstruktur
const data = [{label: "A", value:40}, {label: "B", value:25}, {label: "C", value:20}, {label: "D", value:15}];
const width = 420, height = 420, radius = Math.min(width, height) / 2;
const arc = d3.arc().outerRadius(radius - 10).innerRadius(radius - 70);
const pie = d3.pie().sort(null).value(d => d.value);
const g = svg.append("g").attr("transform", `translate(${width/2}, ${height/2})`);
const arcs = g.selectAll(".arc").data(pie(data)).enter().append("g").attr("class", "arc");
arcs.append("path").attr("d", arc).style("fill", d => colorScale(d.data.label));
arcs.append("text").attr("transform", d => `translate(${arc.centroid(d)})`).text(d => d.data.label);
Hinweis: D3.js bietet immense Flexibilität, erfordert aber JavaScript-Kenntnisse. Für komplexe Interaktionen lassen sich Tooltips, Hover-Effekte und Responsive Design implementieren.
Donut Chart im Frontend ohne Bibliotheken
Auch ohne spezialisierte Bibliotheken lässt sich ein Donut Chart mit reinem HTML/CSS erzeugen, oft in Verbindung mit SVG. Beispielidee:
<svg width="420" height="420" role="img" aria-label="Donut Chart Beispiel">
<circle cx="210" cy="210" r="170" fill="#eee"/>
<!-- Segmente als Pfade hier -->
<path d="..." fill="#4e79a7"/>
<path d="..." fill="#f28e2b"/>
</svg>SVG bleibt eine gute Wahl, wenn Barrierefreiheit und präzise Kontrolle über Formen und Beschriftungen wichtig sind.
Barrierefreiheit, Lesbarkeit und UX-Überlegungen
Eine gute Donut Chart-Implementierung berücksichtigt Barrierefreiheit und Nutzbarkeit. Ohne Barrierefreiheit riskieren Sie Missverständnisse oder Ausgrenzung von Nutzern mit Sehbeeinträchtigungen.
Farben und Kontrast
Vermeiden Sie Farbkombinationen, die für Farbblinde schwer zu unterscheiden sind. Nutzen Sie ausreichend Kontrast und ergänzen Sie Farben durch Muster oder Textbeschriftungen. Die Legende sollte auch bei Farbwechsel verständlich bleiben.
Text und Beschriftungen
Nutzen Sie klare Beschriftungen direkt am Donut Chart oder in der Legende. Tooltipps sollten beim Hover weitere Details liefern, ohne das Diagramm zu überladen. Die zentrale Beschriftung kann die Gesamtsumme oder eine zentrale KPI hervorheben, aber vermeiden Sie eine zu große Textmenge in der Mitte.
Interaktivität
Interaktive Donut Charts – z. B. Hover-Effekte, Drilldown-Funktionen oder Zoom – erhöhen die Verständlichkeit bei größeren Datensätzen. Achten Sie darauf, Interaktionen sinnvoll zu gestalten und nicht zu überladen.
Fortgeschrittene Varianten: Nestende Donut Charts, Interaktive Optionen und mehr
Nestende Donut Charts erweitern das Konzept um mehrere Ebenen der Unterteilung. Sie eignen sich speziell, wenn Hierarchien sichtbar gemacht werden sollen, etwa Region > Land > Produktkategorie. Hierbei bleiben die äußeren Kreise die Aggregationen der inneren Kreise, wodurch Zusammenhänge sichtbar werden.
Nestende Donut Charts – Einsatzgebiete
- Hierarchische Daten wie Organisationseinheiten oder Produktkategorien
- Vergleich von Unterkategorien innerhalb übergeordneter Segmente
- Dashboard-Layouts, in denen mehrere Ebenen gleichzeitig betrachtet werden sollen
Interaktive Donut Chart-Experimente
Beispiele für Interaktionen:
- Klicken auf ein Segment zur Drilldown-Ansicht in einer nächsten Ebene
- Tooltipps mit prozentualer Verteilung und absoluten Werten
- Fokus-Modus, bei dem ein Segment hervorgehoben wird und andere gedimmt erscheinen
Live-Daten und Aktualisierung
In dynamischen Dashboards können Donut Chart-Segmente regelmäßig aktualisiert werden. Beachten Sie dabei, dass zu häufige Änderungen die Lesbarkeit beeinträchtigen können. Setzen Sie zeitliche Puffer oder animate transitions ein, um eine ruhige User Experience zu gewährleisten.
Beispiele aus der Praxis: Typische Anwendungsfälle
Donut Chart finden sich in vielen Bereichen wieder. Im Folgenden finden Sie beispielhafte Einsatzszenarien, die die Vielseitigkeit dieses Diagrammtyps zeigen.
Vertriebs- und Umsatzanalyse
Visualisierung der Anteil der Umsätze pro Produktkategorie oder Vertriebskanal. Mit einer zentralen KPI wie „Gesamtumsatz Q4“ wird der Fokus direkt in die Mitte des Diagramms gelenkt. So behalten Stakeholder den Gesamtkontext im Blick, während einzelne Segmente im Detail analysiert werden können.
Marketing-Reporting
Aufschlüsselung des Traffics nach Kanalquellen (Organisch, Paid, Social, Referral) oder Kampagnen-Performance. Farblich differenzierte Segmente erleichtern den schnellen Überblick in Meetings oder Berichten.
Kundenzufriedenheit und Preference-Insights
Darstellung der Verteilung von Kundenpräferenzen oder Zufriedenheitskategorien. Die zentrale Fläche kann eine ausgewählte Kennzahl wie „Durchschnittliche Zufriedenheit“ oder „NPS“ anzeigen, wodurch der Donut Chart als Kompaktsymbol für eine Vielzahl von Antworten dient.
Beachtenswerte Tipps für optimale Donut Chart-Visualisierungen
- Begrenzen Sie die Anzahl der Segmente auf eine überschaubare Zahl, um Lesbarkeit zu gewährleisten.
- Nur sinnvolle Prozentsätze verwenden, klare Skalierung sicherstellen.
- Vermeiden Sie extreme Unterschiede in den Segmentgrößen, da kleinste Segmente oft schwer zu interpretieren sind.
- Nutzen Sie Beschriftungen, Legenden und Tooltipps sinnvoll, um Kontext zu liefern, ohne zu überladen.
Beispiele: Strukturierte Vorlagen und Muster
Diese Beispiele zeigen, wie Sie strukturierte Donut Chart-Vorlagen in verschiedenen Szenarien verwenden können. Passen Sie Label, Werte und Farben entsprechend Ihrem Datensatz an. Die zentrale Fläche dient oft als KPI oder Gesamtsumme.
Beispiel 1: Umsatzanteile nach Produktkategorien
Labels: ["Elektronik","Haushalt","Kleidung","Sport"]
Werte: [42, 28, 18, 12]
Beispiel 2: Traffic-Quellen
Labels: ["Organisch","Bezahlte Suche","Social","Direkt"]
Werte: [55, 20, 15, 10]
Beispiel 3: Kundenpräferenzen in einer Umfrage
Labels: ["Qualitativ","Preis","Zuverlässigkeit","Service"]
Werte: [35, 25, 20, 20]
Zusammenfassung: Donut Chart als vielseitiges Visualisierungstool
Der Donut Chart ist mehr als ein simpler Kreis mit Löchern. Er bietet eine kompakte, leicht verständliche Darstellung von Anteilen und eignet sich hervorragend für Dashboards, Berichte und interaktive Daten-Storytelling-Formate. Durch durchdachte Farbwahl, klare Beschriftungen und sinnvolle Interaktionen wird der Donut Chart zu einem mächtigen Instrument der Datenkommunikation.
Experimentieren Sie mit verschiedenen Innenradius-Größen, fügen Sie zentrale Kennzahlen hinzu und testen Sie verschiedene Layout-Optionen für Legenden. Mit den richtigen Daten, ästhetischem Design und barrierefreier Umsetzung wird Ihr Donut Chart nicht nur von Suchmaschinen, sondern auch von Ihren Lesern positiv wahrgenommen und verstanden.