Dark waffle

Waffle styletype: "waffle"

Generate dark-mode waffle chart images — bright unit cells on a dark canvas for social. Fresh percentages per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Waffle sample",
  "description": "A single-value completion waffle",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#0f172a"
  },
  "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": "#1e293b",
        "shape": "square",
        "showValue": true,
        "opacity": 1,
        "valueColor": "#e2e8f0"
      }
    }
  ]
}

Waffle examples

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

Dark goal card

A single-value dark waffle at 82%.

API overrides for this example

{
  "share.trackColor": "#1e293b",
  "share.valueColor": "#e2e8f0",
  "share.value": 82,
  "share.colors": [
    "#22d3ee"
  ],
  "share.showValue": true
}

Dark share split

A three-way share on slate with a legend.

API overrides for this example

{
  "share.trackColor": "#1e293b",
  "share.valueColor": "#e2e8f0",
  "share.data": [
    48,
    34,
    18
  ],
  "share.labels": [
    "A",
    "B",
    "C"
  ],
  "share.colors": [
    "#38bdf8",
    "#a78bfa",
    "#f472b6"
  ],
  "share.showLegend": true
}

When to use the dark style

Dark-theme completion cards
Night-mode social composition graphics
Dashboard exports on dark backgrounds

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": "#1e293b",
    "share.shape": "square",
    "share.showValue": true,
    "share.opacity": 1,
    "share.valueColor": "#e2e8f0"
}'

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

Other waffle styles

Default Icon arrayDark

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