20% Off All Froala Plans

Days

Hours

Minutes

Seconds

x

Chord Chart

A chord diagram is a graphical way to represent flow relationship between specific entities in transitioning data. The entities (called nodes) are drawn along the circumference of a circular layout. The flow relationships (called links) are represented by arcs that connect the nodes. The links are colored according to the rule of dominance of transitioning data. It is a visually pleasing way and hence a popular choice among data visualization enthusiasts.

Caption

The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it

Data Plot

Data plot refers to the columns of the chord chart.

Node

The start and endpoints of each flow in a Chord Diagram are called nodes.

Link

The flow paths between any two nodes in a Chord Diagram are called links.

Export menu that appears on top-right of the chart, it offers different options to export a chart.

You can enable or disable chart export using attribute exportEnabled. Refer to Exporting Charts to learn more.

Create a Chord Chart

For a detailed list of attributes, refer to the Chord Chart attributes page.

CHART

JSON

{
  "chart": {
    "caption": "AdWords Campaign Analysis",
    "subcaption": "Conversions as % of total",
    "xaxisname": "# Conversions",
    "yaxisname": "Cost Per Conversion",
    "numberprefix": "$",
    "theme": "froala",
    "plottooltext": "$name : Share of total conversion: $zvalue%"
  },
  "categories": [
    {
      "verticallinealpha": "20",
      "category": [
        {
          "label": "0",
          "x": "0"
        },
        {
          "label": "1500",
          "x": "1500",
          "showverticalline": "1"
        },
        {
          "label": "3000",
          "x": "3000",
          "showverticalline": "1"
        },
        {
          "label": "4500",
          "x": "4500",
          "showverticalline": "1"
        },
        {
          "label": "6000",
          "x": "6000",
          "showverticalline": "1"
        }
      ]
    }
  ],
  "dataset": [
    {
      "data": [
        {
          "x": "5540",
          "y": "16.09",
          "z": "30.63",
          "name": "Campaign 1"
        },
        {
          "x": "4406",
          "y": "12.74",
          "z": "24.36",
          "name": "Campaign 2"
        },
        {
          "x": "1079",
          "y": "15.79",
          "z": "5.97",
          "name": "Campaign 3"
        },
        {
          "x": "1700",
          "y": "8.27",
          "z": "9.4",
          "name": "Campaign 4"
        },
        {
          "x": "853",
          "y": "15.89",
          "z": "4.71",
          "name": "Campaign 5"
        },
        {
          "x": "1202",
          "y": "10.74",
          "z": "6.65",
          "name": "Campaign 6"
        },
        {
          "x": "2018",
          "y": "6.14",
          "z": "11.16",
          "name": "Campaign 7"
        },
        {
          "x": "413",
          "y": "19.83",
          "z": "2.28",
          "name": "Campaign 8"
        },
        {
          "x": "586",
          "y": "13.96",
          "z": "3.24",
          "name": "Campaign 9"
        },
        {
          "x": "184",
          "y": "15.82",
          "z": "1.02",
          "name": "Campaign 10"
        },
        {
          "x": "311",
          "y": "5.83",
          "z": "1.72",
          "name": "Campaign 11"
        },
        {
          "x": "35",
          "y": "10.76",
          "z": "0.19",
          "name": "Campaign 12"
        },
        {
          "x": "55",
          "y": "2.73",
          "z": "0.3",
          "name": "Campaign 13"
        },
        {
          "x": "6",
          "y": "21.22",
          "z": "0.03",
          "name": "Campaign 14"
        }
      ]
    }
  ]
}

HTML

<html>

<head>
      <title>My first chart using FroalaCharts</title>
     
  <script src=https://unpkg.com/[email protected]/froalacharts.js></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script> 

  <script type="text/javascript">   
       var data = {  
        chart: {
    caption: "Different countries Gross Export",
    subcaption: "in 2017",
    nodelabelposition: "outside",
    showlegend: 0,
    theme: "froala",
    mode: "post",
    linkcolorbydominance: "1",
    animation: "0"
  },
  nodes: [
    {
      label: "India"
    },
    {
      label: "Canada"
    },
    {
      label: "USA"
    },
    {
      label: "China"
    },
    {
      label: "UK"
    },
    {
      label: "UAE"
    }
  ],
  links: [
    {
      from: "India",
      to: "Canada",
      value: 3040000000
    },
    {
      from: "India",
      to: "USA",
      value: 46500000000
    },
    {
      from: "India",
      to: "China",
      value: 12700000000
    },
    {
      from: "India",
      to: "UK",
      value: 8860000000
    },
    {
      from: "India",
      to: "UAE",
      value: 27500000000
    },
    {
      from: "Canada",
      to: "India",
      value: 24490000000
    },
    {
      from: "Canada",
      to: "USA",
      value: 310000000000
    },
    {
      from: "Canada",
      to: "China",
      value: 18300000000
    },
    {
      from: "Canada",
      to: "UK",
      value: 9320000000
    },
    {
      from: "Canada",
      to: "UAE",
      value: 1830000000
    },
    {
      from: "USA",
      to: "India",
      value: 24100000000
    },
    {
      from: "USA",
      to: "Canada",
      value: 277000000000
    },
    {
      from: "USA",
      to: "China",
      value: 132000000000
    },
    {
      from: "USA",
      to: "UK",
      value: 53600000000
    },
    {
      from: "USA",
      to: "UAE",
      value: 19900000000
    },
    {
      from: "China",
      to: "India",
      value: 68100000000
    },
    {
      from: "China",
      to: "Canada",
      value: 51900000000
    },
    {
      from: "China",
      to: "USA",
      value: 480000000000
    },
    {
      from: "China",
      to: "UK",
      value: 56800000000
    },
    {
      from: "China",
      to: "UAE",
      value: 45800000000
    },
    {
      from: "UK",
      to: "Canada",
      value: 62400000000
    },
    {
      from: "UK",
      to: "USA",
      value: 5780000000
    },
    {
      from: "UK",
      to: "India",
      value: 518000000
    },
    {
      from: "UK",
      to: "China",
      value: 21200000000
    },
    {
      from: "UK",
      to: "UAE",
      value: 9270000000
    },
    {
      from: "UAE",
      to: "India",
      value: 20500000000
    },
    {
      from: "UAE",
      to: "Canada",
      value: 299000000
    },
    {
      from: "UAE",
      to: "USA",
      value: 7470000000
    },
    {
      from: "UAE",
      to: "China",
      value: 1160000000
    },
    {
      from: "UAE",
      to: "UK",
      value: 3550000000
    }
  ]
};

FroalaCharts.ready(function () {
            froalacharts = new FroalaCharts({
                id: "chart_1",
                type: 'chord',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            });
            froalacharts.render();
        });
    </script>
    
</head>


<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
    <div id="ft">FroalaCharts will render here</div>
</body>

</html>