---
title: "New Component - Chord Diagrams"
description: "Many-to-many relationships on a circle, with ribbons whose thickness shows the strength of each connection. For migration/trade flows and interaction maps."
url: "https://www.imejis.io/changelogs/chord-component"
image: "https://www.imejis.io/og/components/chord.jpg"
published: "2026-07-23"
author: "imejis"
---

# New Component - Chord Diagrams

## New Component: Chord

Some data isn't a flow from A to B. It's a web of connections between everything: migration between regions, trade between markets, how often teams work together. A chord diagram wraps all of it around a circle.

### The data

It uses the same friendly shape as Sankey, `{ source, target, value }`, but reads them as relationships rather than directed flows. Groups get placed around the circle automatically, each arc sized to that group's total weight, and a ribbon connects every related pair with thickness proportional to its value. Self-relationships (source equals target) are skipped.

### Styling

You get adjustable arc thickness and group gap, ribbon opacity, per-group colors or a palette (ribbons take their source group's color), and optional group totals in the labels.

### Dynamic data, per render

```http
POST https://render.imejis.io/v1/<design-id>
{ "relations.links": [
  { "source": "North", "target": "South", "value": 40 },
  { "source": "North", "target": "East",  "value": 25 },
  { "source": "South", "target": "West",  "value": 30 }
] }
```

Migration and trade flows between regions, cross-team or cross-product interaction maps, referral and co-occurrence relationships.

### Try it

It's under Data in the editor palette, with a live playground on the [chord component page](/components/chord).