Radar Chart
Compare multiple variables on a common scale. Useful for performance profiles, skill assessments, or comparing entities across dimensions.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <RadarChart />
Team performance compared across six AARRR growth metrics. FillArea renders a semi-transparent polygon so both series are visible at once.
Same data rendered on a circular grid. Useful when you want to emphasise the relative distances between points rather than the polygon shape.
Engineering team A vs team B across five core competencies. A custom indigo/amber color palette makes the two teams immediately distinguishable.
Product quality scorecard for three product lines with data labels and a save-as-image toolbox button enabled.
Net Promoter breakdown across five customer-experience dimensions. A single filled series on a polygon grid works well as a compact KPI widget.
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
RadarChart
| Property | Type | Default | Description |
|---|---|---|---|
| Indicators | List<RadarIndicator> | [] | Axis definitions with Name and Max value. |
| Series | List<RadarSeriesData> | [] | Data series, one value per indicator. |
| FillArea | bool | true | Fills polygon area with semi-transparent color. |
| Shape | string | "polygon" | Radar shape: "polygon" or "circle". |
| 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) |
| AnimationDuration | int? | null | Entry animation duration in milliseconds for the radar. |
| AnimationEasing | string? | null | ECharts easing function name used during radar animations. |
| ColorPalette | List<string>? | null | Color palette applied to the radar series. |
| Colors | List<string>? | null | Explicit per-series colors overriding the palette. |
| DataZoom | bool | false | Enables a zoom slider on the radar chart. |
| Height | string | "350px" | CSS height of the radar chart container. |
| LabelFormat | string? | null | ECharts label format template for radar data labels. |
| LabelPosition | string | "top" | Position of data labels around each radar vertex. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds while loading. |
| ShowDataLabels | bool | false | Displays per-vertex data labels on the radar. |
| ShowLegend | bool | true | Shows or hides the radar chart legend. |
| ShowTooltip | bool | true | Shows the hover tooltip with series values. |
| Theme | string? | null | ECharts theme name applied to the radar chart. |
| Toolbox | bool | false | Shows the ECharts toolbox with save-as-image controls. |
| Width | string | "100%" | CSS width of the radar chart container. |