Vertical bar progress

Progress styletype: "progress"

A linear bar that fills bottom-to-top — great for levels and thermometers — with the value driven per API call. Create vertical progress images free.

Edit it — this is the actual editor panel

Design JSON — “Vertical bar” 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": 382,
        "y": 90
      },
      "rotation": 0,
      "size": {
        "width": 36,
        "height": 240
      },
      "dynamic": true,
      "properties": {
        "value": 72,
        "max": 100,
        "variant": "linear",
        "orientation": "vertical",
        "fillColor": "#4F46E5",
        "trackColor": "#E5E7EB",
        "rounded": true,
        "showValue": false,
        "valueFormat": "percent",
        "valueColor": "#374151",
        "opacity": 1
      }
    }
  ]
}

Progress examples

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

Fundraising thermometer

A red thermometer at 65% of the campaign goal for a donation page.

API overrides for this example

{
  "completion.variant": "linear",
  "completion.orientation": "vertical",
  "completion.showValue": false,
  "completion.value": 65,
  "completion.fillColor": "#EF4444"
}

Water tank level

A blue fill level at 40% for an IoT tank monitoring snapshot.

API overrides for this example

{
  "completion.variant": "linear",
  "completion.orientation": "vertical",
  "completion.showValue": false,
  "completion.value": 40,
  "completion.fillColor": "#0EA5E9",
  "completion.rounded": false
}

When to use the vertical bar style

Fill-level and tank visuals
Fundraising thermometers
Compact side-by-side level comparisons

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": "linear",
    "completion.orientation": "vertical",
    "completion.fillColor": "#4F46E5",
    "completion.trackColor": "#E5E7EB",
    "completion.rounded": true,
    "completion.showValue": false,
    "completion.valueFormat": "percent",
    "completion.valueColor": "#374151",
    "completion.opacity": 1
}'

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 Circular GaugeVertical bar

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