Thin arcs chord diagram

Chord Diagram styletype: "chord"

Render chord diagrams with slim arcs that emphasize the ribbons — relationships set per API call. Create relationship diagrams free with Imejis.

Edit it — this is the actual editor panel

Design JSON — “Thin arcs” variant

{
  "title": "Chord sample",
  "description": "Migration flows between regions",
  "dimensions": {
    "width": 620,
    "height": 480
  },
  "background": {
    "color": "#ffffff"
  },
  "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.55,
        "showValues": true,
        "opacity": 1,
        "arcThickness": 8
      }
    }
  ]
}

Chord Diagram examples

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

Trade flows

Trade volumes between five markets with slim arcs.

API overrides for this example

{
  "chord.arcThickness": 8,
  "chord.ribbonOpacity": 0.55,
  "chord.links": [
    {
      "source": "US",
      "target": "EU",
      "value": 60
    },
    {
      "source": "US",
      "target": "China",
      "value": 48
    },
    {
      "source": "EU",
      "target": "China",
      "value": 40
    },
    {
      "source": "China",
      "target": "India",
      "value": 30
    },
    {
      "source": "India",
      "target": "US",
      "value": 22
    }
  ]
}

Co-occurrence map

How often tags appear together on posts.

API overrides for this example

{
  "chord.arcThickness": 8,
  "chord.ribbonOpacity": 0.55,
  "chord.links": [
    {
      "source": "AI",
      "target": "Data",
      "value": 44
    },
    {
      "source": "AI",
      "target": "Cloud",
      "value": 30
    },
    {
      "source": "Data",
      "target": "Cloud",
      "value": 26
    },
    {
      "source": "Cloud",
      "target": "Security",
      "value": 20
    },
    {
      "source": "Security",
      "target": "AI",
      "value": 16
    }
  ]
}

When to use the thin arcs style

Dense relationship maps
Flow diagrams where ribbons matter most
Minimal, editorial chord graphics

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.55,
    "chord.showValues": true,
    "chord.opacity": 1,
    "chord.arcThickness": 8
}'

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

DefaultThin arcsCustom palette Dark

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