Gradient bands sankey diagram

Sankey Diagram styletype: "sankey"

Render Sankey diagrams with gradient bands that blend source→target colors — flows set per API call. Create gradient flow diagrams free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Gradient bands” variant

{
  "title": "Sankey sample",
  "description": "A signup-to-paid user-flow diagram",
  "dimensions": {
    "width": 820,
    "height": 440
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-sankey",
      "key": "sankey",
      "type": "sankey",
      "position": {
        "x": 40,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 740,
        "height": 360
      },
      "dynamic": true,
      "properties": {
        "links": [
          {
            "source": "Visits",
            "target": "Signup",
            "value": 620
          },
          {
            "source": "Visits",
            "target": "Bounce",
            "value": 380
          },
          {
            "source": "Signup",
            "target": "Activated",
            "value": 410
          },
          {
            "source": "Signup",
            "target": "Dormant",
            "value": 210
          },
          {
            "source": "Activated",
            "target": "Paid",
            "value": 180
          },
          {
            "source": "Activated",
            "target": "Free",
            "value": 230
          }
        ],
        "linkColorMode": "gradient",
        "showValues": true,
        "valueFormat": "compact",
        "opacity": 1,
        "linkOpacity": 0.5
      }
    }
  ]
}

Sankey Diagram examples

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

Acquisition channels flow

Channels flowing into signups and then plan tiers with gradient bands.

API overrides for this example

{
  "sankey.linkColorMode": "gradient",
  "sankey.linkOpacity": 0.5,
  "sankey.links": [
    {
      "source": "Organic",
      "target": "Signup",
      "value": 320
    },
    {
      "source": "Paid",
      "target": "Signup",
      "value": 240
    },
    {
      "source": "Referral",
      "target": "Signup",
      "value": 140
    },
    {
      "source": "Signup",
      "target": "Pro",
      "value": 180
    },
    {
      "source": "Signup",
      "target": "Free",
      "value": 520
    }
  ]
}

Traffic to outcome

Landing pages flowing to actions with source→target color blends.

API overrides for this example

{
  "sankey.linkColorMode": "gradient",
  "sankey.linkOpacity": 0.5,
  "sankey.links": [
    {
      "source": "Home",
      "target": "Pricing",
      "value": 400
    },
    {
      "source": "Home",
      "target": "Blog",
      "value": 260
    },
    {
      "source": "Pricing",
      "target": "Trial",
      "value": 220
    },
    {
      "source": "Pricing",
      "target": "Exit",
      "value": 180
    },
    {
      "source": "Blog",
      "target": "Trial",
      "value": 90
    },
    {
      "source": "Blog",
      "target": "Exit",
      "value": 170
    }
  ]
}

When to use the gradient bands style

Polished growth / journey diagrams
Executive-summary flow graphics
Marketing-ready conversion paths

Use it dynamically via the API

Push fresh flows per render with '<key>.links' (or just '<key>') as [{ source, target, value }]; node colors via '<key>.nodes'.

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 '{
    "sankey.links": [
        {
            "source": "Visits",
            "target": "Signup",
            "value": 620
        },
        {
            "source": "Visits",
            "target": "Bounce",
            "value": 380
        },
        {
            "source": "Signup",
            "target": "Activated",
            "value": 410
        },
        {
            "source": "Signup",
            "target": "Dormant",
            "value": 210
        },
        {
            "source": "Activated",
            "target": "Paid",
            "value": 180
        },
        {
            "source": "Activated",
            "target": "Free",
            "value": 230
        }
    ],
    "sankey.linkColorMode": "gradient",
    "sankey.showValues": true,
    "sankey.valueFormat": "compact",
    "sankey.opacity": 1,
    "sankey.linkOpacity": 0.5
}'

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

Other sankey diagram styles

DefaultGradient bandsFlat bands Dark

See the sankey diagram component page for the full property reference and FAQs.