Icon array waffle

Waffle styletype: "waffle"

Render icon-array (dot-grid) chart images — circular unit cells showing "X in Y" part-to-whole. Fresh data per API call. Create icon-array images free.

Edit it — this is the actual editor panel

Design JSON — “Icon array” variant

{
  "title": "Waffle sample",
  "description": "A single-value completion waffle",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-waffle",
      "key": "share",
      "type": "waffle",
      "position": {
        "x": 280,
        "y": 50
      },
      "rotation": 0,
      "size": {
        "width": 240,
        "height": 240
      },
      "dynamic": true,
      "properties": {
        "value": 68,
        "rows": 10,
        "columns": 10,
        "colors": [
          "#6366F1"
        ],
        "trackColor": "#e6e6e3",
        "shape": "circle",
        "showValue": true,
        "opacity": 1
      }
    }
  ]
}

Waffle examples

Real renders of the icon array waffle — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

3 in 5 dots

A 5-column dot grid highlighting a 3-of-5 share.

API overrides for this example

{
  "share.shape": "circle",
  "share.value": 60,
  "share.rows": 5,
  "share.columns": 5,
  "share.colors": [
    "#0ea5e9"
  ]
}

Two-tone dot split

A circular icon-array split across two categories.

API overrides for this example

{
  "share.shape": "circle",
  "share.data": [
    70,
    30
  ],
  "share.labels": [
    "Yes",
    "No"
  ],
  "share.colors": [
    "#16a34a",
    "#e11d48"
  ],
  "share.showLegend": true
}

When to use the icon array style

"3 in 5 people" style stat cards
Health and awareness infographics
Compact composition dots beside a headline

Use it dynamically via the API

Push a fresh number per render with '<key>.value' (single percent) or '<key>.data' (category values); labels and colors are overridable too.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "share.value": 68,
    "share.rows": 10,
    "share.columns": 10,
    "share.colors": [
        "#6366F1"
    ],
    "share.trackColor": "#e6e6e3",
    "share.shape": "circle",
    "share.showValue": true,
    "share.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other waffle styles

DefaultIcon arrayDark

See the waffle component page for the full property reference and FAQs.