Gauge Chart
Display a speedometer-style gauge with a pointer. Supports custom ranges with color zones for thresholds like warning and danger levels.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <GaugeChart />
Simple single-value gauge showing vehicle speed against a 200 km/h maximum. No color ranges — a clean, minimal speedometer look.
CPU utilisation gauge with green/amber/red threshold zones making it immediately clear when the system is under stress.
Marketing conversion rate displayed as a percentage gauge. A compact widget suitable for a summary dashboard header.
Net Promoter Score ranging from -100 to +100 with four colour bands — Detractor, Passive, Good, and Excellent.
Disk usage gauge with no pointer — the arc colour alone signals capacity. Toolbox enabled for screenshot export.
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. |