WWAfM Design SystemVersion 0.1.5
View Dashboard

Graphs

Doughnut chart

An Apache ECharts doughnut with a WAfM legend for category proportions.

Doughnut playground

Customize the chart and legend. Drag the right edge to test smaller frames.

Preview size
  • Leistung50%
  • Bildung30%
  • Gestaltung20%

Properties

Values are relative weights, so percentages always reflect their share of the total. Set all values to zero to preview the empty state.

States

The chart adapts to its container and supports an empty dataset.

Compact

  • Leistung50%
  • Bildung30%
  • Gestaltung20%

Empty

Color tokens

Category / Subcategory / State names mapped to the existing WAfM tokens. Category colors are shared by segments, legend dots, and bars.

Data / Leistung / Default
--wafm-level-4-blue
Data / Bildung / Default
--wafm-level-4-sage
Data / Gestaltung / Default
--wafm-level-4-yellow
Surface / Chart / Empty
--muted
Content / Legend / Dark
--foreground

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

DoughnutChart
import { DoughnutChart } from '@wafm/ui/components/doughnut-chart'

<DoughnutChart
  label="Motive"
  data={[
    { id: 'performance', label: 'Leistung', value: 50, color: '--wafm-level-4-blue' },
    { id: 'education', label: 'Bildung', value: 30, color: '--wafm-level-4-sage' },
    { id: 'creation', label: 'Gestaltung', value: 20, color: '--wafm-level-4-yellow' },
  ]}
  size={282}
  innerRadius={63}
/>
data
Items with a unique id, label, nonnegative value, and color. Colors accept CSS colors or token names beginning with --. Percentages are calculated from the total; invalid or negative values become zero.
label
Accessible chart name. Defaults to Doughnut chart. The chart description includes every category and percentage, even when the legend is hidden.
size
Maximum chart diameter in pixels; defaults to 282. The chart shrinks to fit its frame and keeps a square aspect ratio.
innerRadius
Hole radius as a percentage of the outer radius, from 0 to 90. Defaults to 63; higher values produce a thinner ring.
startAngle
Starting angle in degrees. Defaults to 90 (12 o’clock), with clockwise segments.
showLegend / showLegendBars
Both default to true. Legend rows show a colored dot, label, proportional bar, and calculated percentage below the graph.
showTooltip / animation
Both default to true. Hover reveals the category and its percentage. Animation respects reduced-motion preferences.
className
Controls the outer layout. Empty or all-zero data displays an empty ring and No data.