logoImejis.io

Chord Diagram component

Datatype: "chord"

A chord diagram — entities arranged on a circle with ribbons whose thickness shows the strength of each relationship. Built for flows and many-to-many connections.

Edit it — this is the actual editor panel
Design JSON
{
  "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.6,
        "showValues": true,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Chord Diagram examples

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

Region migration flows

Movement between four regions, ribbons sized by volume.

API overrides for this example
{
  "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.showValues": true
}

Team interactions

How often five teams collaborate, as a connection map.

API overrides for this example
{
  "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": "Support",
      "value": 18
    },
    {
      "source": "Support",
      "target": "Eng",
      "value": 14
    }
  ],
  "chord.colors": [
    "#6366f1",
    "#22c55e",
    "#f59e0b",
    "#ec4899",
    "#0ea5e9"
  ]
}

All chord diagram styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

Thin arcsSlim group arcs that put the emphasis on the ribbons.
Custom paletteBrand the arcs with your own colors.
DarkA vivid chord diagram on a dark card for social and dashboards.

Use cases

What developers typically build with the chord diagram component.

  • Migration / trade flows between regions or countries
  • Cross-team or cross-product interaction maps
  • Referral / co-occurrence relationships
  • Any many-to-many connection summary

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 the sample design'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.6,
    "chord.showValues": true,
    "chord.opacity": 1
}'

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

Property reference

Every property the chord diagram component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
linksobject[]text[]Relationships: array of { source, target, value } — names reference groups.
groupsobject[]text[]Optional group colors/order: [{ name, color }]; derived from links otherwise.
colorscolor[]text[]Group palette (cycled) when a group has no explicit color.
padAnglenumber22Gap between group arcs (degrees).
arcThicknessnumber1414Thickness of the group ring band (px).
ribbonOpacitynumber0.60.6Opacity of the relationship ribbons.
labelColorcolor#334155"#334155"Group label text color.
showValuesbooleanfalsefalseAppend each group's total to its label.
valueFormat'number' | 'compact' | 'percent' | 'currency'numbercompactpercentcurrency"compact"How printed values are formatted (1,200 / 1.2K / $1,200).
currencySymbolstringtext"$"Symbol used with the 'currency' format.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Send '<key>.links' as an array of { source, target, value } — group names are matched by string and each ribbon's thickness is proportional to its value.

Groups are placed around the circle automatically, each arc sized to the group's total relationship weight; order and colors can be pinned via groups[].

Pass a colors palette or per-group colors via groups[]; ribbons take their source group’s color at ribbonOpacity.

Enable showValues to append each group’s total relationship weight to its label; valueFormat controls the number style.