Donut Chart
A variant of the pie chart with a center cutout, which can display a summary value or label in the middle.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <DonutChart />
Display a KPI value in the center hole — total ARR, completion percentage, or any single summary figure.
Without a center label the donut reads as a clean ring chart — the open center draws focus to the overall proportion.
A narrow ring (high inner radius) emphasises the segmentation rather than the fill area — a modern dashboard style.
Visualise operational data like ticket resolution status. The center label shows the total count at a glance.
Override the palette to match your brand and hide per-slice labels when the legend alone is sufficient.
Storage usage split across five categories. The center label shows total provisioned capacity for immediate context.
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
DonutChart
| Property | Type | Default | Description |
|---|---|---|---|
| Data | List<DonutChartData> | [] | List of slices with Name and Value. |
| InnerRadius | string | "50%" | Inner radius of the donut hole. |
| OuterRadius | string | "70%" | Outer radius of the donut ring. |
| CenterLabel | string? | null | Text displayed in the center of the donut. |
| ShowLabels | bool | true | Shows name and percentage labels. |
| ShowLegend | bool | true | Renders the legend below the chart. |
| Colors | List<string>? | null | Custom color palette for slices. |
| IsLoading | bool | false | When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state. |
| ShowLoadingSkeleton | bool | true | Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true). |
| SkeletonKind | ChartSkeletonKind | (chart default) | Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic). |
| SkeletonStyle | ChartSkeletonStyle | Phantom | Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay. |
| ShowLoadingLabel | bool | true | Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18) |
| LoadingText | string? | "Loading…" | Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18) |
| ShowTooltip | bool | true | Enables the hover tooltip on donut slices. |
| Width | string | "100%" | CSS width of the chart container. |
| Height | string | "350px" | CSS height of the chart container. |
| Theme | string? | null | ECharts theme name override; null follows global Lumeo theme. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds; lower cycles placeholder data faster. |
| ShowDataLabels | bool | false | Renders ECharts value labels on each slice (separate from ShowLabels). |
| LabelPosition | string | "outside" | Position of slice labels: "outside", "inside", or "center". |
| LabelFormat | string? | null | ECharts formatter string applied to slice labels. |
| DataZoom | bool | false | Enables zoom slider (rarely useful for donut data). |
| Toolbox | bool | false | Shows save/restore toolbox in the corner. |
| ColorPalette | List<string>? | null | Alternate color palette applied when Colors is unset. |
| AnimationDuration | int? | null | Override ECharts animation duration in milliseconds. |
| AnimationEasing | string? | null | ECharts easing function name for entry animation. |