Dark funnel

Funnel styletype: "funnel"

Generate dark-mode funnel chart images — vivid conversion stages on a dark canvas for social. Fresh stage data per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Funnel sample",
  "description": "A signup conversion funnel",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-funnel",
      "key": "funnel",
      "type": "funnel",
      "position": {
        "x": 220,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 360,
        "height": 340
      },
      "dynamic": true,
      "properties": {
        "data": [
          {
            "label": "Visits",
            "value": 12000
          },
          {
            "label": "Signups",
            "value": 4200
          },
          {
            "label": "Trials",
            "value": 1800
          },
          {
            "label": "Paid",
            "value": 640
          }
        ],
        "color": "#38bdf8",
        "showValues": true,
        "showPercent": true,
        "percentOf": "first",
        "valueFormat": "compact",
        "opacity": 1,
        "labelColor": "#0b1220"
      }
    }
  ]
}

Funnel examples

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

Dark growth funnel

Visits → Paid on slate with conversion rates.

API overrides for this example

{
  "funnel.color": "#38bdf8",
  "funnel.labelColor": "#0b1220",
  "funnel.data": [
    {
      "label": "Visits",
      "value": 20000
    },
    {
      "label": "Signups",
      "value": 6400
    },
    {
      "label": "Trials",
      "value": 2600
    },
    {
      "label": "Paid",
      "value": 900
    }
  ],
  "funnel.showPercent": true,
  "funnel.percentOf": "first",
  "funnel.valueFormat": "compact"
}

Dark pipeline colors

A per-stage colored pipeline on a near-black card.

API overrides for this example

{
  "funnel.color": "#38bdf8",
  "funnel.labelColor": "#0b1220",
  "funnel.data": [
    {
      "label": "Leads",
      "value": 600
    },
    {
      "label": "MQL",
      "value": 320
    },
    {
      "label": "SQL",
      "value": 150
    },
    {
      "label": "Won",
      "value": 60
    }
  ],
  "funnel.colors": [
    "#22d3ee",
    "#818cf8",
    "#e879f9",
    "#fb7185"
  ],
  "funnel.valueFormat": "number"
}

When to use the dark style

Dark-theme growth report cards
Night-mode pipeline graphics
Dashboard funnel exports on dark backgrounds

Use it dynamically via the API

Push fresh stages per render with '<key>.data' (or just '<key>') as [{ label, value }]; colors 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 '{
    "funnel.data": [
        {
            "label": "Visits",
            "value": 12000
        },
        {
            "label": "Signups",
            "value": 4200
        },
        {
            "label": "Trials",
            "value": 1800
        },
        {
            "label": "Paid",
            "value": 640
        }
    ],
    "funnel.color": "#38bdf8",
    "funnel.showValues": true,
    "funnel.showPercent": true,
    "funnel.percentOf": "first",
    "funnel.valueFormat": "compact",
    "funnel.opacity": 1,
    "funnel.labelColor": "#0b1220"
}'

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

Other funnel styles

Default Step conversionDark

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