Delta Ring

<zyna-delta>

One paired-arc ring per category. The outer arc is the current value, the inner arc the baseline; the annular gap between them is filled over the change wedge — green for a gain, red for a loss — with a 45° hatch so direction reads even for colour-blind viewers. The signed % change sits in the ring centre. It answers "what moved since last period?" at a glance.

Demo

Regional funding vs target · Q3

HTML 
<zyna-delta
  arc-degrees="270"
  data='[
    {"label":"North", "value":128, "baseline":100},
    {"label":"South", "value":86,  "baseline":110},
    {"label":"East",  "value":152, "baseline":140, "color":"#4BBFA8"},
    {"label":"West",  "value":74,  "baseline":95}
  ]'
></zyna-delta>
Attribute Type Default Description
dataJSON—Array of {label, value, baseline, color?}. value draws the outer arc, baseline the inner arc.
maxnumberdata maxShared scale ceiling — the angle for each arc is value / max. Set it to keep several charts on one scale.
arc-degreesnumber270Total arc sweep in degrees, echoing <zyna-gauge>. Try 360 for full rings.
colorstringvar(--zyna)Accent for the current arc. Per-item color overrides it.
themedark | lightdarkControls text and track colour scheme.
heightnumberautoExplicit height in px. Auto-derived from width when omitted.
label-formatstring—D3-style number format for the centre delta when a baseline is 0 (percent change is undefined, so the raw delta is shown).

Usage Tips

  • Delta Ring is for period-over-period comparison — one number now, one number before. For a full trend, reach for Line.
  • Set an explicit max when placing several charts side by side so their arc lengths are directly comparable.
  • The hatch band is the message: it grows with the size of the change and is colour-blind safe by texture, not just hue.
  • Keep to 3–6 categories per row. The rings shrink as you add more, and the centre % gets hard to read.
  • A zero baseline has no defined percentage — the centre falls back to the raw delta, formatted with label-format.