mittwald Flow Logo

Components

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.GitHub
30 %

Playground

Verwende <DonutChart />, um ein DonutChart darzustellen.

30 %
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)

Gigabyte

12 GB

Dezimalzahl

135

Größen

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

30 %
30 %

Mit alternativem Text

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

300GB

Status

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

30 %
30 %
80 %
95 %

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 überschrieben werden. Beim Überschreiben muss darauf geachtet werden, dass nebeneinander liegende Farben weiterhin einen ausreichenden Kontrast zueinander haben.

100 %
  • Item 1 (28 %)
  • Item 2 (24 %)
  • Item 3 (20 %)
  • Item 4 (10 %)
  • Item 5 (12 %)
  • Item 6 (6 %)

Overview