# DonutChart

Das DonutChart dient zur übersichtlichen Darstellung proportionaler Daten in einem ringförmigen Diagramm. Es eignet sich besonders zur Visualisierung von Verteilungen, Anteilen oder Fortschritten.

## Guidelines

# Grundlagen

Ein DonutChart visualisiert proportionale Daten in Form eines ringförmigen
Diagramms. Es eignet sich besonders zur Darstellung von Anteilen oder
Verteilungen. Es dient als visuelle Alternative zur ProgressBar. Durch seine
ansprechende und fokussierende Darstellung rückt es die Daten besonders in den
Mittelpunkt der Nutzerwahrnehmung, was es ideal für Dashboards und andere
datenintensive Oberflächen macht.

## Best practices

Achte bei der Verwendung eines DonutCharts darauf, dass ...

- jede Segmentfarbe eindeutig und kategorisch unterscheidbar ist. Verwende dafür
  die
  [Categorical Colors](https://flow.mittwald.de/02-foundations/01-design/02-colors).
- die Anzahl der Segmente 6 nicht überschreitet, da eine zu große Segmentanzahl
  die Lesbarkeit stark beeinträchtigt.
- die Segmente nach ihrer Größe sortiert sind, beginnend mit dem größten Wert
  auf der 12-Uhr-Position, und danach im Uhrzeigersinn absteigend folgen.

## Verwendung

Verwende ein DonutChart, um ...

- proportionale Daten übersichtlich und intuitiv darzustellen.
- verschiedene Kategorien oder Anteile innerhalb eines Ganzen hervorzuheben.
- Daten gezielt in den Fokus der User zu rücken, etwa in Dashboards oder anderen
  datenintensiven Oberflächen.