Gauge

<zyna-gauge>

Segmented half-gauge for a single scalar reading. Define colour zones with band labels; a dot marker sits on the arc at the value's position, and zones past the marker dim so the eye reads "up-to-here" without a needle.

Demo

Sentiment meter

HTML 
<zyna-gauge
  value="55"
  min="0"
  max="100"
  start-label="Low"
  end-label="High"
  zones='[
    {"from":0,"to":20,"color":"#8b1a1f","label":"Bad"},
    {"from":20,"to":40,"color":"#e74c3c","label":"Poor"},
    {"from":40,"to":60,"color":"#f1c40f","label":"Neutral"},
    {"from":60,"to":80,"color":"#2ecc71","label":"Good"},
    {"from":80,"to":100,"color":"#11864f","label":"Great"}
  ]'
></zyna-gauge>
Attribute Type Default Description
valuenumber—Scalar reading (required). Clamped to [min, max] when drawing.
minnumber0Minimum of the range.
maxnumber100Maximum of the range.
zonesJSON—Array of {from, to, color, label} (required). Each object defines one coloured segment and its band label.
start-labelstring—Optional label at the arc's start end.
end-labelstring—Optional label at the arc's end end.
themedark | lightdarkControls text and marker colour scheme.
labelstring—Static caption below the centre value. When omitted, the active zone's label is used instead.
label-formatstring—D3-style number format applied to the centre value (e.g. .1%).
thicknessnumberautoArc thickness in px. Scales with radius when omitted.
arc-degreesnumber180Total arc sweep in degrees. Try 210 for the "dipped" half-gauge look.
dim-opacitynumber0.35Opacity applied to zones past the marker.
heightnumber—Explicit height in px. Auto-derived from width when omitted.

Usage Tips

  • Define zones in ascending order with matching from/to values so adjacent segments meet cleanly.
  • Omit label to have the active zone's band label appear under the number — it changes as the value moves between zones.
  • Use label-format=".1%" with min="0" max="1" for percentage readings.
  • Gauges work best for single KPIs (CPU, disk, sentiment, NPS). For comparison across entities, reach for a bar or lollipop.
  • Don't stack more than three or four gauges side-by-side in a dashboard — the eye stops reading each one.