Donut chart — a ring chart for part-to-whole relationships.
A core PatternFly chart type used for showing categorical proportions (resource allocation, status breakdowns) with a hollow center that can display a summary metric.
A single slice: label and numeric value.
Create a donut chart from a list of slices.
chart =
Donut.fromData
[ { label = "Running", value = 42 }
, { label = "Stopped", value = 8 }
, { label = "Pending", value = 5 }
]Set the overall SVG size (width = height). Default: 230.
Apply a Theme.
Override the slice color list.
Set the chart title rendered below the donut.
Set the text displayed in the hollow center of the donut.
The first argument is the primary metric (e.g. "42"), the second is a
sub-label (e.g. "Running").
Donut.fromData slices
|> Donut.withCenterText "42" "Running"Show a skeleton placeholder instead of the chart while data is loading.
Enable SVG <title> tooltips on each slice. Default: False.
When enabled, hovering over a slice shows a browser-native tooltip with the
label, value, and percentage (e.g. "Running: 42 (76%)"). No ports required.
Render to Html msg.
An opaque donut chart configuration.