Dark chord diagram

Chord Diagram styletype: "chord"

Generate dark-mode chord diagram images — vivid ribbons on a dark card for social and dashboards. Fresh relationships per API call. Try Imejis free.

Edit it — this is the actual editor panel

Design JSON — “Dark” variant

{
  "title": "Chord sample",
  "description": "Migration flows between regions",
  "dimensions": {
    "width": 620,
    "height": 480
  },
  "background": {
    "color": "#0f172a"
  },
  "components": [
    {
      "id": "sample-chord",
      "key": "chord",
      "type": "chord",
      "position": {
        "x": 150,
        "y": 40
      },
      "rotation": 0,
      "size": {
        "width": 400,
        "height": 400
      },
      "dynamic": true,
      "properties": {
        "links": [
          {
            "source": "North",
            "target": "South",
            "value": 40
          },
          {
            "source": "North",
            "target": "East",
            "value": 25
          },
          {
            "source": "North",
            "target": "West",
            "value": 15
          },
          {
            "source": "South",
            "target": "East",
            "value": 30
          },
          {
            "source": "South",
            "target": "West",
            "value": 20
          },
          {
            "source": "East",
            "target": "West",
            "value": 22
          }
        ],
        "padAngle": 2,
        "ribbonOpacity": 0.7,
        "showValues": true,
        "opacity": 1,
        "labelColor": "#e2e8f0"
      }
    }
  ]
}

Chord Diagram examples

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

Dark migration flows

Region flows on slate with vivid ribbons.

API overrides for this example

{
  "chord.labelColor": "#e2e8f0",
  "chord.ribbonOpacity": 0.7,
  "chord.links": [
    {
      "source": "North",
      "target": "South",
      "value": 40
    },
    {
      "source": "North",
      "target": "East",
      "value": 25
    },
    {
      "source": "South",
      "target": "East",
      "value": 30
    },
    {
      "source": "South",
      "target": "West",
      "value": 20
    },
    {
      "source": "East",
      "target": "West",
      "value": 22
    }
  ]
}

Dark team map

Team collaboration on a near-black card.

API overrides for this example

{
  "chord.labelColor": "#e2e8f0",
  "chord.ribbonOpacity": 0.7,
  "chord.links": [
    {
      "source": "Eng",
      "target": "Design",
      "value": 34
    },
    {
      "source": "Eng",
      "target": "Product",
      "value": 40
    },
    {
      "source": "Design",
      "target": "Product",
      "value": 28
    },
    {
      "source": "Product",
      "target": "Sales",
      "value": 22
    },
    {
      "source": "Sales",
      "target": "Eng",
      "value": 16
    }
  ],
  "chord.colors": [
    "#38bdf8",
    "#a78bfa",
    "#f472b6",
    "#34d399",
    "#fbbf24"
  ]
}

When to use the dark style

Dark-theme relationship cards
Dashboard connection maps on dark backgrounds
Social graphics for flows & networks

Use it dynamically via the API

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

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 '{
    "chord.links": [
        {
            "source": "North",
            "target": "South",
            "value": 40
        },
        {
            "source": "North",
            "target": "East",
            "value": 25
        },
        {
            "source": "North",
            "target": "West",
            "value": 15
        },
        {
            "source": "South",
            "target": "East",
            "value": 30
        },
        {
            "source": "South",
            "target": "West",
            "value": 20
        },
        {
            "source": "East",
            "target": "West",
            "value": 22
        }
    ],
    "chord.padAngle": 2,
    "chord.ribbonOpacity": 0.7,
    "chord.showValues": true,
    "chord.opacity": 1,
    "chord.labelColor": "#e2e8f0"
}'

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

Other chord diagram styles

Default Thin arcs Custom paletteDark

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