Atlas Forms
Radial Gauge
The gauge-radial type renders a speedometer-style semicircular gauge. It accepts a single scalar value (not an array) and displays it against a defined min/max range. Colour zones highlight performance bands such as green/amber/red thresholds. Use it for KPI score cards, SLA metrics, NPS scores, and system health indicators.
Data Shape
Unlike chart types that bind to arrays, the radial gauge binds to a single numeric value in the form context:
// Binding resolves to a single number
// context.kpi.npsScore = 72
{
"id": "nps-gauge",
"type": "gauge-radial",
"settings": {
"min": 0,
"max": 100,
"value": {
"source": "$context",
"path": "kpi.npsScore"
}
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value of the gauge scale |
max | number | 100 | Maximum value of the gauge scale |
value | BindingConfig | number | — | Scalar binding to the current value, or a static number |
zones | GaugeZone[] | — | Colour bands: [{ from, to, color, label? }] |
unit | string | — | Unit label shown below the value (e.g. "%" or "ms") |
title | string | — | Label shown at the bottom of the gauge |
showPointer | boolean | true | Show the needle pointer |
pointerStyle | needle | pin | needle | Shape of the pointer |
startAngle | number | -225 | Starting angle in degrees (ECharts convention) |
endAngle | number | -315 | Ending angle — controls arc length |
showTicks | boolean | true | Show scale tick marks on the arc |
splitNumber | number | 5 | Number of major tick/label divisions on the arc |
format | string | — | Value format: number, currency, percent |
NPS Score Gauge with Zones
{
"id": "nps-gauge",
"type": "gauge-radial",
"width": "third",
"settings": {
"height": "260px",
"title": "Net Promoter Score",
"min": -100,
"max": 100,
"unit": "NPS",
"splitNumber": 4,
"zones": [
{ "from": -100, "to": 0, "color": "#ef4444", "label": "Detractor" },
{ "from": 0, "to": 50, "color": "#f59e0b", "label": "Passive" },
{ "from": 50, "to": 100, "color": "#22c55e", "label": "Promoter" }
],
"value": { "source": "$context", "path": "survey.nps" }
}
}SLA Compliance Gauge
{
"id": "sla-gauge",
"type": "gauge-radial",
"width": "third",
"settings": {
"height": "260px",
"title": "SLA Compliance",
"min": 0,
"max": 100,
"unit": "%",
"format": "number",
"zones": [
{ "from": 0, "to": 80, "color": "#ef4444" },
{ "from": 80, "to": 95, "color": "#f59e0b" },
{ "from": 95, "to": 100, "color": "#22c55e" }
],
"value": { "source": "$context", "path": "sla.compliancePercent" }
}
}System Latency Monitor
{
"id": "latency-gauge",
"type": "gauge-radial",
"width": "third",
"settings": {
"height": "260px",
"title": "Avg Response Time",
"min": 0,
"max": 2000,
"unit": "ms",
"splitNumber": 4,
"zones": [
{ "from": 0, "to": 200, "color": "#22c55e" },
{ "from": 200, "to": 500, "color": "#f59e0b" },
{ "from": 500, "to": 2000, "color": "#ef4444" }
],
"value": { "source": "$context", "path": "telemetry.avgLatencyMs" }
}
}Three Gauges Side by Side
Using width: "third" places three gauges on a single row for a compact KPI dashboard panel:
// Form schema excerpt — three gauges in a row
[
{ "id": "nps-gauge", "type": "gauge-radial", "width": "third", "settings": { ... } },
{ "id": "sla-gauge", "type": "gauge-radial", "width": "third", "settings": { ... } },
{ "id": "latency-gauge", "type": "gauge-radial", "width": "third", "settings": { ... } }
]
Reactive Value Updates
The
value binding is reactive. If a workflow node pushes an updated value into the form context (via SignalR or a form action), the needle animates smoothly to the new position without a page reload. Set animation: true (the default) to enable the sweep animation.