Chord Diagrams

Overview

Chord charts (or chord diagrams) are an interesting way to display data, and can be used for specific purposes. ZingChart offers a large number of variations that can be applied to your HTML5 chord charts.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/TDWFZJKE

          
{
  "type":"chord",
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        

Data Format

Number Arrays

Create a "series" array of objects of length N. Within each of those objects, place a "values" array with a length equal to the number of objects within the "series" array.


          
{
  "type":"chord",
  "series":[ // Length N array of objects
    {
      "values":[val1, val2, ..., valN] // Length N array of numbers
    },
    {
      "values":[val1, val2, ..., valN]
    }
      ...,
    {
      "values":[val1, val2, ..., valN]
    }
  ]
}
        

Chord Chart-specific Properties

Angle Padding

The "angle-padding" attribute sets the angle padding between two chord segments. Compare "angle-padding":0 with "angle-padding":50.


          
{
  "type":"chord",
  "options":{
    "angle-padding":0
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/NTZKT9GK

The following shows "angle-padding":50.


          
{
  "type":"chord",
  "options":{
    "angle-padding":50
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/HJ5COU9J

Band Space

The "band-space" attribute sets the space between the band and the chords. Compare "band-space":10 with "band-space":50.


          
    "type":"chord",
    "options":{
        "band-space":10
    }"series":[
      {
        "values":[6637,5700,4789,2771],
        "text":"A"
      },
      {
        "values":[7737,2691,2202,7006],
        "text":"B"
      },
      {
        "values":[8574,9898,4084,1765],
        "text":"C"
      },
      {
        "values":[5309,1602,8395,2908],
        "text":"D"
      }
    ]
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/1L7EL666

The following shows "band-space":50.


          
{
  "type":"chord",
  "options":{
    "band-space":50
  }"series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/PDAOD8ZJ

Band Width

The "band-width" attribute sets the width of the band. Compare "band-width":10 with "band-width":50.


          
{
  "type":"chord",
  "options":{
    "band-width":10
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/DBMZJMZJ

The following shows "band-width":50.


          
{
  "type":"chord",
  "options":{
    "band-width":50
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/YXBJH8KR

Flat

The "flat" attribute sets whether the chord's highlight effect (when hovering over the band) is enabled or not. Setting the "flat" attribute to true will disable the highlight effect when hovering over the band.


          
{
  "type":"chord",
  "options":{
    "flat":true
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/KMMSZG14

Radius

The "radius" attribute sets the radius of the chord. Value can be relative to the plotarea size. Compare "radius":50 with "radius":150.


          
{
  "type":"chord",
  "options":{
    "radius":50
  }"series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ZUY1C3BE

The following shows "radius":150.


          
{
  "type":"chord",
  "options":{
    "radius":150
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/HYE71AJJ

Styling

Chord charts also include a number of global stylings that allow you to manipulate the appearance and behaviors of your rankflow chart. They can be implemented into your chart by placing them within the "options" object.

Color Type

The "color-type" attribute sets the color algorithm used to color the items.

Random

The following shows "color-type":"random".


          
{
  "type":"chord",
  "options":{
    "color-type":"random"
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/WBKCKQLW

Color

The "color" attribute sets the color of the items when the "color-type" attribute is set to "color".


          
{
  "type":"chord",
  "options":{
    "color-type":"color",
    "color":"#f90"
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/PRIABRCA

Palette

The "palette" attribute defines a custom palette used by the items if "color-type" is set to "palette".


          
{
  "type":"chord",
  "options":{
    "color-type":"palette",
    "palette":["#15252d","#768766","#e5db82","#bb9944","#bb6622","#b1200f","#342e3a"]
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/YTX215RV

Band

The "band" attribute defines the global or series styling for the band.


          
{
  "type":"chord",
  "options":{
    "style":{
      "band":{
        "border-width":4,
        "border-color":"#900"
      }
    }
  },
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A"
    },
    {
      "values":[7737,2691,2202,7006],
      "text":"B"
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C"
    },
    {
      "values":[5309,1602,8395,2908],
      "text":"D"
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ZE1WI8VA

Chord

The "chord" attribute defines the global or series styling for the chords.


          
{
  "type":"chord",
  "options":{
    "style":{
      "chord":{
        "border-width":4,
        "border-color":"#900"
      }
    }
  }
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/SP2SE9CH

Label

The "label" attribute defines the global or series styling for the labels.


          
  "type":"chord",
  "options":{
    "style":{
      "label":{
        "color":"#900"
      }
    }
  }
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/2EPG0PYR

The following styling within a series.


          
{
  "type":"chord",
  "series":[
    {
      "values":[6637,5700,4789,2771],
      "text":"A",
      "style":{
        "label":{
          "color":"#090"
        }
      }
    },
    {
      "values":[8574,9898,4084,1765],
      "text":"C",
      "style":{
        "label":{
          "color":"#009"
        }
      }
    }
  ]
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/2Q8K6FA5

Tick

The "tick" attribute defines the global or series styling for the ticks.


          
{
    "type":"chord",
    "options":{
        "style":{
            "tick":{
                "size":6,
                "line-color":"#900"
            }
        }
    },
    "series":[
      {
        "values":[6637,5700,4789,2771],
        "text":"A"
      },
      {
        "values":[7737,2691,2202,7006],
        "text":"B"
      },
      {
        "values":[8574,9898,4084,1765],
        "text":"C"
      },
      {
        "values":[5309,1602,8395,2908],
        "text":"D"
      }
    ]
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ULC7RL9V

Tooltips

The "tooltip" attribute defines the global or series styling for the tooltips.


          
    "type":"chord",
    "options":{
        "style":{
            "tooltip":{
                "border-width":2,
                "border-color":"#900",
                "background-color":"#fc0"
            },
            "band":{
                "tooltip":{
                    "text":"Band of item %text"
                }
            },
            "chord":{
                "tooltip":{
                    "text-chord":"Chord between %text-source (%value-source) and %text-destination (%value-destination)",
                    "text":"Self-chord of item %text with value %value"
                }
            }
        }
    }
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/8JZBCYWV

The following styling within a series.


          
    "type":"chord",
    "series":[
    {
        "values":[6637,5700,4789,2771],
        "text":"A",
        "style":{
            "tooltip":{
                "background-color":"#090",
                "color":"#fff"
            },
            "band":{
                "tooltip":{
                    "text":"Specific text for band of item %text"
                }
            },
            "chord":{
                "tooltip":{
                    "text-chord":"%text-source/%value-source links to %text-destination/%value-destination",
                    "text":"%text has value %value"
                }
            }
        }
    }
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/3YQHR7W7

Summary

Got a question about how chord diagram charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.