Nightingale (Rose)

<zyna-nightingale>

Radial rose chart where each sector's radius encodes its value. Equal-angle sectors make magnitude the only visual variable, which suits comparing multiple categories with colour-coded groupings.

Demo

Libya aid by sector — EU (red) vs non-EU (green)

HTML 
<zyna-nightingale
  data='[
    {"label":"Emergency",     "value":607,"color":"#B03A2E"},
    {"label":"Governance",    "value":408,"color":"#C0392B"},
    {"label":"Peacebuilding", "value":243,"color":"#922B21"},
    {"label":"Capacity",      "value":153,"color":"#A93226"},
    {"label":"Migration",     "value":87, "color":"#7B241C"},
    {"label":"Health",        "value":124,"color":"#2D8C4E"},
    {"label":"Reconstruction","value":48, "color":"#239B56"},
    {"label":"WASH",          "value":48, "color":"#1E8449"},
    {"label":"Education",     "value":26, "color":"#196F3D"},
    {"label":"Community",     "value":48, "color":"#145A32"}
  ]'
  theme="dark"
></zyna-nightingale>
Attribute Type Default Description
dataJSON array—Array of { label, value, color? } objects.
colorhexvar(--zyna)Fallback accent color for items without a per-item color.
themedark | lightdarkControls background and text colour scheme.
heightnumber—Explicit height in px. Auto-derived from width when omitted.
show-valuesbooleantrueSet to "false" to hide the numeric value labels on leader lines.
label-formatstring—D3-style number format (e.g. $,.0f, .1%, ,.2f). Raw value shown when omitted.

Usage Tips

Use colour families to encode a secondary grouping: warm tones for one group, cool for another. Sort sectors by value descending for a natural clockwise taper.

  • Aim for 6–12 segments for best legibility
  • Keep labels concise. Elbow leader lines handle positioning.
  • Don't use fewer than 4 segments. A bar chart is cleaner at low counts.
  • Don't exceed 15 segments. Labels overlap and narrow sectors lose meaning.