Negative delta metric

Metric styletype: "metric"

A drop against an up-is-good metric renders the badge in the down color automatically — value and delta set on every API call. Try Imejis for free.

Edit it — this is the actual editor panel

Design JSON — “Negative delta” 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": 41200,
        "label": "Revenue",
        "format": "currency",
        "labelPosition": "top",
        "delta": -3.4,
        "showDelta": true,
        "deltaFormat": "percent",
        "deltaDirection": "up-good",
        "align": "center",
        "opacity": 1
      }
    }
  ]
}

Metric examples

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

Weekly revenue dip

An honest report tile — revenue down 3.4% renders the badge in red.

API overrides for this example

{
  "revenue.value": 41200,
  "revenue.delta": -3.4,
  "revenue.label": "Weekly revenue"
}

Cloud spend trending down

Costs falling is good news — 'down-good' colors the 12.8% drop green.

API overrides for this example

{
  "revenue.value": 8940,
  "revenue.delta": -12.8,
  "revenue.label": "Cloud spend",
  "revenue.deltaDirection": "down-good"
}

When to use the negative delta style

Weekly change reports that show honest dips
Cost metrics where down is good
Alerting visuals for slipping KPIs

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": 41200,
    "revenue.label": "Revenue",
    "revenue.format": "currency",
    "revenue.labelPosition": "top",
    "revenue.delta": -3.4,
    "revenue.showDelta": true,
    "revenue.deltaFormat": "percent",
    "revenue.deltaDirection": "up-good",
    "revenue.align": "center",
    "revenue.opacity": 1
}'

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 CompactNegative deltaSuffix units Currency

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