# Pie Chart

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

# Pie Chart

Show proportional distribution across categories. Best used with 5 or fewer slices to keep it readable.

## 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

<PieChart />

Preview Code

Basic Pie Chart

Default pie with external labels showing slice name and percentage. Ideal for revenue mix or market share breakdowns.

Preview Code

No Labels — Legend Only

Hide slice labels and rely on the legend for a cleaner look when slices are too narrow to label clearly.

Preview Code

Custom Color Palette

Override the default colors with brand or semantic colors to match your application's visual identity.

Preview Code

Operating System Market Share

A real-world example with tighter distribution — five segments where the dominant slice is clearly visible.

Preview Code

No Legend

Remove the legend entirely for an ultra-minimal chart when categories are self-explanatory from surrounding context.

Preview Code

Loading state

Simulate loading

Hold skeleton open

Duration: 2s 

Cycle: 1400 ms 

Four flat slices rotate slowly while the chart data arrives. Matches the shape of the real pie — no 3D burst.

## API Reference

### PieChart

Property

Type

Default

Description

Data

List<PieChartData>

\[\]

List of slices with Name and Value.

ShowLabels

bool

true

Shows name and percentage labels on slices.

ShowLegend

bool

true

Renders the legend below the chart.

Colors

List<string>?

null

Custom color palette for slices.

ShowTooltip

bool

true

Enables the hover tooltip.

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)**

Width

string

"100%"

CSS width applied to the chart container.

Height

string

"350px"

CSS height applied to the chart container.

Theme

string?

null

Overrides the ECharts theme; null follows the app's light/dark mode.

PhantomCycleMs

int

1400

Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading.

ShowDataLabels

bool

false

Renders the numeric value alongside each slice label.

LabelPosition

string

"outside"

Position of slice data labels (e.g. outside, inside, center).

LabelFormat

string?

null

ECharts format string applied to pie slice labels.

DataZoom

bool

false

Enables zoom/pan controls on the pie chart.

Toolbox

bool

false

Shows the toolbox with save-as-image, restore, and view controls.

ColorPalette

List<string>?

null

Overrides the chart's base color palette across pie slices.

AnimationDuration

int?

null

Override entry animation duration (ms); null uses the ECharts default.

AnimationEasing

string?

null

ECharts easing function name applied to entry animations.