# Donut Chart

Source: https://lumeo.nativ.sh/components/charts/donut

# Donut Chart

A variant of the pie chart with a center cutout, which can display a summary value or label in the middle.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo.Charts

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<DonutChart />

Preview Code

Donut with Center Label

Display a KPI value in the center hole — total ARR, completion percentage, or any single summary figure.

Preview Code

Simple Donut

Without a center label the donut reads as a clean ring chart — the open center draws focus to the overall proportion.

Preview Code

Thin Ring

A narrow ring (high inner radius) emphasises the segmentation rather than the fill area — a modern dashboard style.

Preview Code

Support Ticket Status

Visualise operational data like ticket resolution status. The center label shows the total count at a glance.

Preview Code

Custom Colors, No Labels

Override the palette to match your brand and hide per-slice labels when the legend alone is sufficient.

Preview Code

Storage Breakdown

Storage usage split across five categories. The center label shows total provisioned capacity for immediate context.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

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.