Lumeo

Pie Chart

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

Installation

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<PieChart />

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

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

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

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

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

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.