# Gauge Chart

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

# Gauge Chart

Display a speedometer-style gauge with a pointer. Supports custom ranges with color zones for thresholds like warning and danger levels.

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

<GaugeChart />

Preview Code

Speed Gauge

Simple single-value gauge showing vehicle speed against a 200 km/h maximum. No color ranges — a clean, minimal speedometer look.

Preview Code

Gauge with Color Ranges

CPU utilisation gauge with green/amber/red threshold zones making it immediately clear when the system is under stress.

Preview Code

Conversion Rate KPI

Marketing conversion rate displayed as a percentage gauge. A compact widget suitable for a summary dashboard header.

Preview Code

NPS Score Gauge

Net Promoter Score ranging from -100 to +100 with four colour bands — Detractor, Passive, Good, and Excellent.

Preview Code

Server Disk Usage

Disk usage gauge with no pointer — the arc colour alone signals capacity. Toolbox enabled for screenshot export.

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

### GaugeChart

Property

Type

Default

Description

Value

double

0

The current gauge value.

Min

double

0

Minimum scale value.

Max

double

100

Maximum scale value.

Title

string?

null

Title text displayed on the gauge.

Unit

string?

null

Unit suffix displayed after the value.

ShowPointer

bool

true

Shows the gauge pointer needle.

Ranges

List<GaugeRange>?

null

Color zones with Threshold and Color values.

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 of the chart container.

Height

string

"350px"

CSS height of the chart container.

Theme

string?

null

Optional ECharts theme name override.

PhantomCycleMs

int

1400

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

ShowDataLabels

bool

false

When true, displays the numeric value label on the gauge.

LabelPosition

string

"top"

Position of the value label on the gauge.

LabelFormat

string?

null

Optional ECharts label formatter string for the value label.

DataZoom

bool

false

Enables the interactive data-zoom slider beneath the chart.

Toolbox

bool

false

Shows the ECharts toolbox with export and zoom controls.

ColorPalette

List<string>?

null

Alternate full color palette applied to the gauge.

AnimationDuration

int?

null

Animation duration in milliseconds when the value changes.

AnimationEasing

string?

null

ECharts easing function name for the pointer animation curve.