# Radar Chart

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

# Radar Chart

Compare multiple variables on a common scale. Useful for performance profiles, skill assessments, or comparing entities across dimensions.

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

<RadarChart />

Preview Code

Filled Radar

Team performance compared across six AARRR growth metrics. FillArea renders a semi-transparent polygon so both series are visible at once.

Preview Code

Circle Shape

Same data rendered on a circular grid. Useful when you want to emphasise the relative distances between points rather than the polygon shape.

Preview Code

Team Skill Comparison

Engineering team A vs team B across five core competencies. A custom indigo/amber color palette makes the two teams immediately distinguishable.

Preview Code

With Toolbox & Data Labels

Product quality scorecard for three product lines with data labels and a save-as-image toolbox button enabled.

Preview Code

Single-Series NPS Dimensions

Net Promoter breakdown across five customer-experience dimensions. A single filled series on a polygon grid works well as a compact KPI widget.

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

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