Waffle component

Datatype: "waffle"

A waffle / icon-array chart — part-to-whole shown as a grid of unit cells. Far more legible than a pie at social sizes, driven by a single percentage or a few category values.

Edit it — this is the actual editor panel

Design JSON

{
  "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": "square",
        "showValue": true,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Waffle examples

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

Goal completion

A single-value waffle at 68% with the number printed in the middle.

API overrides for this example

{
  "share.value": 68,
  "share.colors": [
    "#6366F1"
  ],
  "share.shape": "square",
  "share.showValue": true
}

Market share split

Three categories filling the grid by share, with a legend.

API overrides for this example

{
  "share.data": [
    52,
    33,
    15
  ],
  "share.labels": [
    "Us",
    "Rival",
    "Other"
  ],
  "share.colors": [
    "#2563eb",
    "#f59e0b",
    "#a1a1aa"
  ],
  "share.showLegend": true
}

All waffle styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

Icon arrayCircular cells for a dot-grid "X in Y" icon-array look.

DarkBright cells on a dark canvas for social cards.

Use cases

What developers typically build with the waffle component.

Goal / completion progress cards (68% funded)
Survey and poll result graphics
Market-share and composition snapshots
Shareable "X in Y" stat images for social

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 the sample design'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": "square",
    "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.

Property reference

Every property the waffle component accepts — in the editor, in design JSON, and as API overrides.

Property	Type	Edits as	Default	Description
data	number[]	text	[]	Category values; each fills a proportional share of the grid.
value	number	0	—	Single-category shorthand: percent (0–100) of the grid to fill.
rows	number	10	10	Grid rows.
columns	number	10	10	Grid columns (rows × columns = total cells).
colors	color[]	text	[]	One color per category (data) or [fill] for a single value.
trackColor	color	#e6e6e3	"#e6e6e3"	Empty / remainder cell color.
labels	string[]	text	[]	Category labels shown in the legend.
showLegend	boolean	false	false	Show the category legend.
legendPosition	'top' \| 'right' \| 'bottom'	toprightbottom	"bottom"	Where the legend is placed.
shape	'square' \| 'circle'	squarecircle	"square"	Cell shape: square or circle (icon array).
cellRadius	number	2	2	Corner radius for square cells (px).
gap	number	3	3	Gap between cells (px).
showValue	boolean	false	false	Print the percentage in the middle (single value).
valueColor	color	#3f3f46	"#3f3f46"	Center value / legend text color.
opacity	number	1	1	Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidth	number	0	0	Border thickness in pixels around the component.
borderColor	color	transparent	"transparent"	Border color (any CSS color).
borderStyle	'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'	soliddasheddotteddoublenone	"solid"	Border line style.
borderRadius	number	0	0	Corner radius in pixels.
boxShadow	string	text	—	CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

For a single share send '<key>.value' as a 0–100 percent. For multiple categories send '<key>.data' as an array of numbers plus '<key>.labels'.

Yes — rows and columns set the grid (default 10 × 10 = 100 cells); each category fills a whole number of cells by its share.

Set shape to "circle" for a dot-grid icon-array look; square (the default) gives the classic waffle.