Ticker metric

Metric styletype: "metric"

Generate ticker stat tile images — a big number with a mini sparkline trendline and an auto red/green % move — with the series pushed on every API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Ticker” 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": 48250,
        "label": "Revenue",
        "format": "compact",
        "labelPosition": "top",
        "delta": 12.5,
        "showDelta": true,
        "deltaFormat": "percent",
        "deltaDirection": "up-good",
        "align": "center",
        "opacity": 1,
        "sparkline": [
          39000,
          41000,
          43000,
          45200,
          46900,
          48200
        ]
      }
    }
  ]
}

Metric examples

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

Stock watchlist tile

A share price with an intraday sparkline; the % move colors itself green.

API overrides for this example

{
  "revenue.format": "none",
  "revenue.sparkline": [
    212,
    215,
    214,
    219,
    222,
    218,
    225,
    229.87
  ],
  "revenue.value": 229.87,
  "revenue.prefix": "$",
  "revenue.label": "AAPL"
}

Churn trending down

Churn falling is good — 'down-good' colors the drop and its sparkline green.

API overrides for this example

{
  "revenue.format": "none",
  "revenue.sparkline": [
    4.1,
    4,
    3.8,
    3.9,
    3.6,
    3.4,
    3.3,
    3.2
  ],
  "revenue.value": 3.2,
  "revenue.suffix": "%",
  "revenue.label": "Churn rate",
  "revenue.deltaDirection": "down-good"
}

When to use the ticker style

Stock / crypto watchlist tiles
Live KPI tickers for status dashboards
Weekly trend cards posted to Slack

Use it dynamically via the API

Push the latest number with '<key>.value' (or just '<key>') and the change with '<key>.delta'; label, format and the '<key>.sparkline' trend series 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": 48250,
    "revenue.label": "Revenue",
    "revenue.format": "compact",
    "revenue.labelPosition": "top",
    "revenue.delta": 12.5,
    "revenue.showDelta": true,
    "revenue.deltaFormat": "percent",
    "revenue.deltaDirection": "up-good",
    "revenue.align": "center",
    "revenue.opacity": 1,
    "revenue.sparkline": [
        39000,
        41000,
        43000,
        45200,
        46900,
        48200
    ]
}'

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

Other metric styles

DefaultTickerCompact Negative delta Suffix units Currency

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