Gauge progress

Progress styletype: "progress"

Render half-circle, speedometer-style gauges for scores and capacity, with the value set on every API call. Generate gauge images free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Gauge” variant

{
  "title": "Progress sample",
  "description": "A dynamic progress bar",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-progress",
      "key": "completion",
      "type": "progress",
      "position": {
        "x": 270,
        "y": 130
      },
      "rotation": 0,
      "size": {
        "width": 260,
        "height": 160
      },
      "dynamic": true,
      "properties": {
        "value": 72,
        "max": 100,
        "variant": "gauge",
        "orientation": "horizontal",
        "fillColor": "#4F46E5",
        "trackColor": "#E5E7EB",
        "rounded": true,
        "showValue": true,
        "valueFormat": "percent",
        "valueColor": "#374151",
        "opacity": 1,
        "thickness": 18
      }
    }
  ]
}

Progress examples

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

Server load dial

CPU load at 68% on a speedometer-style gauge for an ops status image.

API overrides for this example

{
  "completion.variant": "gauge",
  "completion.showValue": true,
  "completion.thickness": 18,
  "completion.value": 68,
  "completion.fillColor": "#F59E0B",
  "completion.valueColor": "#B45309"
}

NPS score gauge

An NPS of 62 shown as a raw value (not a percent) on a green dial.

API overrides for this example

{
  "completion.variant": "gauge",
  "completion.showValue": true,
  "completion.thickness": 18,
  "completion.value": 62,
  "completion.fillColor": "#10B981",
  "completion.valueFormat": "value",
  "completion.valueColor": "#065F46"
}

When to use the gauge style

Performance score visuals in reports
Server load and capacity snapshots
NPS or health score graphics

Use it dynamically via the API

Drive the bar with '<key>.value' (or just '<key>'); max, fill/track colors and valueFormat are overridable per render.

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 '{
    "completion.value": 72,
    "completion.max": 100,
    "completion.variant": "gauge",
    "completion.orientation": "horizontal",
    "completion.fillColor": "#4F46E5",
    "completion.trackColor": "#E5E7EB",
    "completion.rounded": true,
    "completion.showValue": true,
    "completion.valueFormat": "percent",
    "completion.valueColor": "#374151",
    "completion.opacity": 1,
    "completion.thickness": 18
}'

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

Other progress styles

Default CircularGaugeVertical bar

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