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 />
| Name | Value |
|---|---|
| Products | 48 |
| Services | 27 |
| Subscriptions | 17 |
| Consulting | 5 |
| Other | 3 |
Default pie with external labels showing slice name and percentage. Ideal for revenue mix or market share breakdowns.
| Name | Value |
|---|---|
| Products | 48 |
| Services | 27 |
| Subscriptions | 17 |
| Consulting | 5 |
| Other | 3 |
Hide slice labels and rely on the legend for a cleaner look when slices are too narrow to label clearly.
| Name | Value |
|---|---|
| Products | 48 |
| Services | 27 |
| Subscriptions | 17 |
| Consulting | 5 |
| Other | 3 |
Override the default colors with brand or semantic colors to match your application's visual identity.
| Name | Value |
|---|---|
| Products | 48 |
| Services | 27 |
| Subscriptions | 17 |
| Consulting | 5 |
| Other | 3 |
Remove the legend entirely for an ultra-minimal chart when categories are self-explanatory from surrounding context.
| Name | Value |
|---|---|
| Products | 48 |
| Services | 27 |
| Subscriptions | 17 |
| Consulting | 5 |
| Other | 3 |
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. |