# 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.

## Overview

# Playground

Verwende `<DonutChart />`, um ein DonutChart darzustellen.

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<DonutChart value={30} aria-label="Auslastung" />
```

---

# Mit Unit

Im default wird das DonutChart immer mit Prozentangabe angezeigt. Über das
Property `formatOptions` können aber auch andere Einheiten gewählt werden. (s.
[Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat))

## Gigabyte

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<DonutChart
  aria-label="Speicherplatz"
  formatOptions={{ style: "unit", unit: "gigabyte" }}
  maxValue={50}
  value={12}
/>
```

## Dezimalzahl

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<DonutChart
  aria-label="Performance"
  formatOptions={{ style: "decimal" }}
  maxValue={200}
  value={135}
/>
```

---

# Größen

Die Size des DonutCharts kann Medium oder Large sein. Medium ist dabei die
Standardgröße.

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<>
  <DonutChart value={30} aria-label="Auslastung" />
  <DonutChart value={30} aria-label="Auslastung" size="l" />
</>
```

---

# Mit alternativem Text

Über die `children` kann der Text innerhalb des DonutCharts überschrieben werden

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<DonutChart
  value={300}
  maxValue={600}
  aria-label="Speicherplatz"
>
  <strong>300</strong>
  <small>GB</small>
</DonutChart>
```

---

# Status

Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: **Info**,
**Success**, **Warning** und **Danger**.

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<>
  <DonutChart
    value={30}
    status="success"
    aria-label="Auslastung"
  />
  <DonutChart value={30} aria-label="Auslastung" />
  <DonutChart
    value={80}
    status="warning"
    aria-label="Auslastung"
  />
  <DonutChart
    value={95}
    status="danger"
    aria-label="Auslastung"
  />
</>
```

---

# Segmente

Die Anzeige des DonutCharts kann über das `segments` Property um einzelne
Abschnitte ergänzt werden. Der `value` ergibt sich in diesem Fall aus der Summe
der Werte der einzelnen Segmente. Um die einzelnen Werte näher zu erläutern wird
automatisch die `Legend` Component angezeigt. Über das `showLegend` Property
kann diese ein- und ausgeblendet werden. Die Position der Legende kann über das
Property `legendPosition` bestimmt werden.

Die Farben der Segmente werden automatisch festgelegt, können aber über das
`color`-Property, mit
[Categorical Colors](/02-foundations/01-design/02-colors#categorical-color) oder
eigenen Colors überschrieben werden. Beim Überschreiben muss darauf geachtet
werden, dass nebeneinander liegende Farben weiterhin einen ausreichenden
Kontrast zueinander haben.

```tsx
import { DonutChart } from "@mittwald/flow-react-components";

<DonutChart
  aria-label="Items"
  segments={[
    { title: "Item 1", value: 28 },
    { title: "Item 2", value: 24 },
    { title: "Item 3", value: 20 },
    { title: "Item 4", value: 10 },
    { title: "Item 5", value: 12 },
    { title: "Item 6", value: 6 },
  ]}
/>
```