# Radial Chart

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

# Radial Chart

Display a single metric against a scale as a gauge arc. Perfect for KPIs, system health indicators, or progress toward a goal.

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

<RadialChart />

Preview Code

Performance Gauge

Preview Code

Custom Range

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

### RadialChart

Property

Type

Default

Description

Value

double

0

The current gauge value.

Min

double

0

Minimum value of the scale.

Max

double

100

Maximum value of the scale.

Label

string?

null

Label text displayed below the value.

Color

string?

null

Accent color for the gauge arc.

ShowProgress

bool

true

Renders the filled progress arc.

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

Animation duration in milliseconds when value changes.

AnimationEasing

string?

null

ECharts easing function name for animation curves.

ColorPalette

List<string>?

null

Alternate full color palette applied to the chart.

DataZoom

bool

false

Enables zoom slider controls (rarely useful for radial gauges).

Height

string

"350px"

Chart container height as a CSS length.

LabelFormat

string?

null

Optional ECharts label formatter string for the value label.

LabelPosition

string

"top"

Position of the data label relative to the gauge.

PhantomCycleMs

int

1400

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

ShowDataLabels

bool

false

When true, displays the value label on the gauge.

Theme

string?

null

ECharts theme name applied to this chart instance.

Toolbox

bool

false

Shows the ECharts toolbox with export controls.

Width

string

"100%"

Chart container width as a CSS length.