Orbital

<zyna-orbital>

Concentric arc chart where each ring fills a proportion of a full circle (0–1). The outermost ring is the first item. Includes tick marks, radial glow, and elbow leader lines.

Value format: values must be decimals between 0 and 1 (e.g. 0.42, not 42). Pass proportions, not raw counts or percentages.

Demo

EU project portfolio by implementation stage

HTML 
<zyna-orbital
  data='[
    {"label":"Closing",   "value":0.419},
    {"label":"Active",    "value":0.316},
    {"label":"Completed", "value":0.246},
    {"label":"Planning",  "value":0.017}
  ]'
  theme="dark"
></zyna-orbital>
Attribute Type Default Description
dataJSON array—Array of { label, value, color? }. value is 0–1. First item = outermost ring.
colorhexvar(--zyna)Fallback accent color for items without a per-item color.
themedark | lightdarkControls background colour scheme.
heightnumber—Explicit height in px. Auto-derived from width when omitted.
show-valuesbooleantrueSet to "false" to hide label and percentage text on all rings.
label-formatstring—D3-style number format applied to the raw 0–1 value (e.g. .1% → 42.0%). Defaults to percentage display.
ring-thicknessnumber0.115Ring width as a fraction of the outer radius (e.g. 0.08 for thinner rings, 0.18 for thicker).

Usage Tips

  • Pass values between 0 and 1 (e.g. 0.42 not 42)
  • Order rings largest to smallest so the outer ring dominates visually
  • Use a gradient of the same hue family across rings for visual coherence
  • Keep to 3–6 rings for best legibility
  • Don't use more than 6 rings. Inner rings become too narrow to read.
  • Don't use when categories are unrelated. The concentric structure implies hierarchy.