Chord Diagram

A chord diagram puts the items around a circle and joins them with ribbons, each as wide as the flow between them. Here, five European cities and the flows between every pair, which are rarely the same both ways.

Try it:
Hover a ribbon to read the flow
Click a city to hide its ribbons

Get the code JavaScript React, Vue, Angular, Svelte JSON

About this chart

When a chord diagram works

A chord diagram shows who exchanges how much with whom, when every item can both send and receive. The ring shows each item’s total and the ribbons the pairs that matter most. Five to fifteen items read well.

Good for

Trade or migration between countries
Traffic between parts of a city or a website
Who works with whom across teams

Think twice when

Flows with a start and an end, like a budget: use a Sankey diagram
More than 20 or so items: the ring gets crowded
Exact numbers: a table or a heat map reads more precisely

For developers

Get the code.

Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.

Docs:Chord diagram Flow charts Node toggling

For projects that use npm: npm install @amcharts/amcharts5. See Getting started. The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code.
How it reads: "type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".

// Create root element
// https://docs.amcharts.com/v5/getting-started/#root-element
var root = am5.Root.new("chartdiv");

// Set themes
// https://docs.amcharts.com/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Create series
// https://docs.amcharts.com/v5/charts/flow-charts/
var chart = root.container.children.push(am5.SerialChartContainer.new(root, {})); // holds the chord diagram

var series = chart.series.push(am5flow.Chord.new(root, { // ribbons between the cities, as wide as their values
  sourceIdField: "source",
  targetIdField: "target",
  valueField: "value"
}));
// skip every other color of the set, so neighboring cities differ more
series.nodes.get("colors").set("step", 2);

// Set data
// https://docs.amcharts.com/v5/charts/flow-charts/#setting-data
series.data.setAll([
  { source: "Berlin", target: "Amsterdam", value: 14 },
  { source: "Berlin", target: "London", value: 33 },
  { source: "Berlin", target: "Paris", value: 13 },
  { source: "Berlin", target: "Madrid", value: 36 },

  { source: "Amsterdam", target: "Berlin", value: 42 },
  { source: "Amsterdam", target: "London", value: 20 },
  { source: "Amsterdam", target: "Paris", value: 19 },
  { source: "Amsterdam", target: "Madrid", value: 11 },

  { source: "London", target: "Amsterdam", value: 9 },
  { source: "London", target: "Berlin", value: 38 },
  { source: "London", target: "Paris", value: 41 },
  { source: "London", target: "Madrid", value: 16 },

  { source: "Paris", target: "Amsterdam", value: 12 },
  { source: "Paris", target: "London", value: 16 },
  { source: "Paris", target: "Berlin", value: 21 },
  { source: "Paris", target: "Madrid", value: 8 },

  { source: "Madrid", target: "Amsterdam", value: 22 },
  { source: "Madrid", target: "London", value: 25 },
  { source: "Madrid", target: "Paris", value: 19 },
  { source: "Madrid", target: "Berlin", value: 7 }
]);

// Make stuff animate on load
series.appear(1000, 100);

{
  "type": "SerialChartContainer",
  "properties": {
    "series": [
      "#series-0"
    ]
  },
  "refs": [
    {
      "data-0": [
        {
          "source": "Berlin",
          "target": "Amsterdam",
          "value": 14
        },
        {
          "source": "Berlin",
          "target": "London",
          "value": 33
        },
        {
          "source": "Berlin",
          "target": "Paris",
          "value": 13
        },
        {
          "source": "Berlin",
          "target": "Madrid",
          "value": 36
        },
        {
          "source": "Amsterdam",
          "target": "Berlin",
          "value": 42
        },
        {
          "source": "Amsterdam",
          "target": "London",
          "value": 20
        },
        {
          "source": "Amsterdam",
          "target": "Paris",
          "value": 19
        },
        {
          "source": "Amsterdam",
          "target": "Madrid",
          "value": 11
        },
        {
          "source": "London",
          "target": "Amsterdam",
          "value": 9
        },
        {
          "source": "London",
          "target": "Berlin",
          "value": 38
        },
        {
          "source": "London",
          "target": "Paris",
          "value": 41
        },
        {
          "source": "London",
          "target": "Madrid",
          "value": 16
        },
        {
          "source": "Paris",
          "target": "Amsterdam",
          "value": 12
        },
        {
          "source": "Paris",
          "target": "London",
          "value": 16
        },
        {
          "source": "Paris",
          "target": "Berlin",
          "value": 21
        },
        {
          "source": "Paris",
          "target": "Madrid",
          "value": 8
        },
        {
          "source": "Madrid",
          "target": "Amsterdam",
          "value": 22
        },
        {
          "source": "Madrid",
          "target": "London",
          "value": 25
        },
        {
          "source": "Madrid",
          "target": "Paris",
          "value": 19
        },
        {
          "source": "Madrid",
          "target": "Berlin",
          "value": 7
        }
      ]
    },
    {
      "series-0": {
        "type": "Chord",
        "settings": {
          "sourceIdField": "source",
          "targetIdField": "target",
          "valueField": "value"
        },
        "properties": {
          "data": "#data-0",
          "nodes": {
            "settings": {
              "colors": {
                "type": "ColorSet",
                "settings": {
                  "step": 2
                }
              }
            }
          }
        }
      }
    }
  ]
}

More Flow demos.

All Flow demos All demos

Directed Chord Diagram

Chord Diagram with Animated Bullets

Non-Ribbon Chord Diagram

Sankey Diagram