Suffix units metric

Metric styletype: "metric"

Raw values with your own suffix — "1,284 users", "42 km" — instead of built-in formats, updated on every API call. Generate unit stat tiles free.

Edit it — this is the actual editor panel

Design JSON — “Suffix units” variant

{
  "title": "Metric sample",
  "description": "A dynamic KPI tile",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-metric",
      "key": "revenue",
      "type": "metric",
      "position": {
        "x": 250,
        "y": 140
      },
      "rotation": 0,
      "size": {
        "width": 300,
        "height": 140
      },
      "dynamic": true,
      "properties": {
        "value": 1284,
        "label": "Active today",
        "format": "number",
        "labelPosition": "top",
        "delta": 12.5,
        "showDelta": false,
        "deltaFormat": "percent",
        "deltaDirection": "up-good",
        "align": "center",
        "opacity": 1,
        "suffix": " users"
      }
    }
  ]
}

Metric examples

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

Active users right now

A live headcount with a plain-text unit appended to the number.

API overrides for this example

{
  "revenue.value": 1284,
  "revenue.format": "number",
  "revenue.suffix": " users",
  "revenue.label": "Active today",
  "revenue.showDelta": false
}

Fitness distance readout

Kilometers logged this week for a workout recap graphic.

API overrides for this example

{
  "revenue.value": 42.5,
  "revenue.format": "none",
  "revenue.suffix": " km",
  "revenue.label": "This week",
  "revenue.showDelta": false,
  "revenue.labelPosition": "bottom"
}

When to use the suffix units style

Active user counts with a unit label
Fitness or IoT readouts (km, kWh, steps)
Inventory levels with item units

Use it dynamically via the API

Push the latest number with '<key>.value' (or just '<key>') and the change with '<key>.delta'; label and format 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 '{
    "revenue.value": 1284,
    "revenue.label": "Active today",
    "revenue.format": "number",
    "revenue.labelPosition": "top",
    "revenue.delta": 12.5,
    "revenue.showDelta": false,
    "revenue.deltaFormat": "percent",
    "revenue.deltaDirection": "up-good",
    "revenue.align": "center",
    "revenue.opacity": 1,
    "revenue.suffix": " users"
}'

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

Other metric styles

Default Compact Negative deltaSuffix unitsCurrency

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