Choose an item

Chord Diagram

This chart type belongs to PowerCharts XT

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.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [{ "_itemHeader": "Chord Diagram Anatomy", "imgSrc": "chord-diagram-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "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.", "annotationDescLinkPath": null, "leftPosition": "32%", "topPosition": "0%", "annotationLinks": [{ "linkDesc": "Learn how to add the caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "52%", "topPosition": "5.5%", "annotationLinks": [{ "linkDesc": "Learn how to add subcaption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "You can customize font properties and cosmetics of the subcaption using attributes. Learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "66%", "topPosition": "12%", "annotationLinks": [{ "linkDesc": "You can customize the canvas border. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "33%", "topPosition": "57.5%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "5", "annotationName": "Node", "annotationDesc": "The start and endpoints of each flow in a Sankey/Chord Diagram are called nodes. Learn more about them ", "annotationDescLinkPath": null, "leftPosition": "32%", "topPosition": "38%", "annotationLinks": [{ "linkDesc": "You can customize various aspects of a node, including its size, color, label, padding, etc. Learn more about them ", "linkPath": "/chart-guide/standard-charts/sankey-diagram#node" }] }, { "annotationNumber": "6", "annotationName": "Link", "annotationDesc": "The flow paths between any two nodes in a Sankey/Chord Diagram are called links. Learn more about them ", "annotationDescLinkPath": null, "leftPosition": "48%", "topPosition": "30%", "annotationLinks": [{ "linkDesc": "You can customize various aspects of a link, including its color, curvature, value, etc. Learn more about them ", "linkPath": "/chart-guide/standard-charts/sankey-diagram#link" }] }, { "annotationNumber": "7", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "62%", "topPosition": "56%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

Chord Diagrams are also referred to as Radial Network Diagram, Chord Layout, or Dependency Wheel.

To create a chord diagram follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a chord diagram, set chord.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of chord diagram.

A simple Chord Diagram looks as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

In the above diagram, there are 6 nodes. A link connects a pair of nodes where a relationship exists. Hovering on a node shows all the links (or relationships) associated with it. Likewise, hovering on a link shows the related nodes. Self linking nodes can also exist.

Salient Features of a Chord Diagram

Pre transition and Post transition

A chord diagram represents transition data. There are two stable states for transitional data - pre transition and post transition.

Let us consider a scenario where customers of two leading telecom operators are switching from one to another and vice versa. The number of customers the telecom operators have before the customers start switching is the pre transition state. The number of customers the telecom operators have after the customers have switched is the post transition state. The lengths of the node arcs represent the total value (customers who switch) associated with the node and hence are affected by the state or 'mode'.

By default, FusionCharts builds chord diagrams in the post state. However, you can build a pre state chord diagram, as well.

Links take a derived color from the nodes they connect. By default, the node with lesser outflow value gives color to the link. In case of equal values on both nodes, the link gets a gradient color of both the nodes.

The Chord Diagram in FusionCharts follows the rule of dominance in data. It works as follows:

  • In pre state chord diagrams, the node with the minimum outflow is the dominant end of a link. In the use case regarding the telecom operators, this applies to the one losing the least number of customers.

  • In post state chord diagrams, the node with the maximum inflow is the dominant end of a link. In the use case regarding the telecom operators, this applies to the operator that gains more customers.

In case both the operator lose the same number of customers (to each other), the link will get a blend shade.

In a Chord Diagram, links or connections are often referred to as ribbons.

Customizations of a Chord Diagram

When you click on a node in a Chord Diagram, it is disabled and links associated with it are hidden. This can help you focus on nodes and links that are important in specific contexts. The behavior is controlled by the chart-level enableToggle attribute, which is set to 1 by default. You can disable the behavior if you want. To do so, set the value of enableToggle to 0.

The minNodeSize attribute controls the minimum space that the disabled nodes can take.

Use the code given below:

{
    "chart": {
        "enableToggle": "0"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Set Node Spacing

You can introduce white space between two adjacent nodes to reduce clutter in the chart. To do so, assign the value of the desired white space to the attribute nodeSpacing.

Use the code given below:

{
    "chart": {
        "nodeSpacing": "15"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Set Node Thickness

You can specify the thickness of a single node, or globally, of all nodes in the chart. To do so, set the desired value to the attribute nodeThickness.

Use the code given below:

{
    "chart": {
        "nodeThickness": "15"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Set Chart Radius

You can specify the radius of the chart in percentage value. To do so, set the desired value to the attribute chordRadius.

Use the code given below:

{
    "chart": {
        "chordRadius": "100"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Position Node Labels

Node label positions can be set to tangential (default), outside, or inside. To position node labels manually, set the desired position to the nodeLabelPosition attribute.

Use the code given below:

{
    "chart": {
        "nodeLabelPosition": "inside"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Hide Node Labels

You can choose not to display node labels, to make the chart look less cluttered. To do so, set the value of the attribute showNodeLabels to 0.

Use the code given below:

{
    "chart": {
        "showNodeLabels": "0"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Set Starting Chart Angle

You can set the starting angle, to specify from where in the circular layout the chord arcs should begin. To do so, set the value of the startingAngle attribute to the desired angle.

Use the code given below:

{
    "chart": {
        "startingAngle": "120"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Set Total Chart Angle

You can set the total angle that the chord diagram will cover when initially rendered. To do so, set the value of the totalAngle attribute between 0 and 360.

Use the code given below:

{
    "chart": {
        "totalAngle": "270"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

You can introduce white space between a node and its link to make the chart look cleaner. To do so, set the value of the nodeLinkPadding attribute to the desired amount.

Use the code given below:

{
    "chart": {
        "nodeLinkPadding": "10"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

Make a Pre Transition Chart

You can make a pre transition chord diagram instead of the default post transition one. To do so, set the value of the mode attribute to pre.

Use the code given below:

{
    "chart": {
        "mode": "pre"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.

By default, links in a Chord Diagram inherit the color of the dominant node connected to them. However, if you set the value of the linkColorByDominance attribute to 0, then the links will inherit the color of the non-dominant node instead.

Use the code given below:

{
    "chart": {
        "linkColorByDominance": "0"
    }
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the above diagram.