Gauge Chart

Radial gauges. Pro · Charts and analytics › Analysis and scenarios

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add gauge-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { GaugeChart } from 'valyro-ui-pro';

Prop	Type	Default
`value` *	`number`		Current reading; the indicator is clamped to `min`–`max`, a non-finite value shows as `min`.
`min`	`number`	`0`	Default 0.
`max`	`number`	`100`	Default 100.
`bands`	`GaugeBand[]`		Threshold bands in ascending order; the value takes the tone of its band.
`sweep`	`180 \| 270`	`180`	Semicircle (180) or open ring (270). Default 180.
`indicator`	`'arc' \| 'needle'`	`'arc'`	`arc`: progress arc. `needle`: colored bands with a needle. Default `arc`.
`label`	`string`		Caption under the value.
`valueFormatter`	`ValueFormatter`		Formats the center value and the `min`/`max` end labels (one decimal by default).
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`size`	`number`	`240`	Max width in px; the gauge scales down in narrow containers. Default 240.
`ariaLabel` *	`string`		Accessible name of the gauge; the formatted value is appended to it.

Metric Comparison — Metric comparison
Analytics Filter Bar — Dashboard filters
Scenario Simulator — Assumption sliders update the forecast, uncertainty band and KPIs
Variance Explainer — Waterfall: what drove a KPI change, with drill-down into factors
Map Layer Story — Map story: each step toggles data layers and frames a region, no WebGL
Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages