Waffle Chart

<zyna-waffle>

A 10×10 grid where each cell represents 1%. Segments can be solid-filled or outline-only, ideal for proportion breakdowns.

Demo

Libya humanitarian funding by donor (each cell = 1%)

EU NEAR
EU FPI+ECHO
UN System
USAID
Other
html 
<zyna-waffle
  data='[
    {"label":"EU NEAR",     "value":24, "color":"#1A3A6B"},
    {"label":"EU FPI+ECHO", "value":9,  "color":"#2A5A9B"},
    {"label":"UN System",   "value":28, "color":"#009EDB", "outline":true},
    {"label":"USAID",       "value":12, "color":"#4A6741", "outline":true},
    {"label":"Other",       "value":27, "color":"#7A6230", "outline":true}
  ]'
  cols='10'
  gap='3'
  style="display:block;width:100%;max-width:480px">
</zyna-waffle>
Attribute Type Default Description
data JSON array — Array of { label, value, color?, outline? }. Sum ≤ 100.
color hex var(--zyna) Fallback accent color for items without per-item color.
cols number 10 Number of columns in the grid.
gap number 3 Gap between cells in pixels.
height number — Explicit height in px. Auto-derived from data when omitted.

Outline Variant

Use "outline":true on a segment to render it as an unfilled bordered cell. This is useful for showing a "remaining" portion against a goal.

Funding goal progress — 68% reached

Goal (68%)
Remaining (32%)
html 
<zyna-waffle
  data='[
    {"label":"Goal",      "value":68},
    {"label":"Remaining", "value":32, "outline":true}
  ]'
  cols='10'
  gap='3'
  style="display:block;width:100%;max-width:360px">
</zyna-waffle>

Usage Tips

  • Values represent percentages — the sum of all segments should not exceed 100
  • Use 10 columns (default) for a clean 10×10 grid where each cell = 1%
  • Keep to 3–5 segments for best legibility; more colors reduce clarity
  • Use outline:true on a segment to show "remaining" or "other" without visual weight
  • Don't use for time series or ranked data — the grid implies proportion, not sequence