Chord Charts and 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.

https://app.zingsoft.com/demos/embed/TDWFZJKE
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/NTZKT9GK
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/HJ5COU9J
https://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"
      }
    ]
https://app.zingsoft.com/demos/embed/1L7EL666
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/PDAOD8ZJ
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/DBMZJMZJ
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/YXBJH8KR
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/KMMSZG14
https://app.zingsoft.com/demos/embed/KMMSZG14

Radius

The radius attribute sets the radius of the chord. The 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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/ZUY1C3BE
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/HYE71AJJ
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/WBKCKQLW
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/PRIABRCA
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/YTX215RV
https://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"
    }
  ]
}
https://app.zingsoft.com/demos/embed/ZE1WI8VA
https://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"
      }
    }
  }
}
https://app.zingsoft.com/demos/embed/SP2SE9CH
https://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"
      }
    }
  }
https://app.zingsoft.com/demos/embed/2EPG0PYR
https://app.zingsoft.com/demos/embed/2EPG0PYR

The following styling is 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"
        }
      }
    }
  ]
}
https://app.zingsoft.com/demos/embed/2Q8K6FA5
https://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"
      }
    ]
https://app.zingsoft.com/demos/embed/ULC7RL9V
https://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"
                }
            }
        }
    }
https://app.zingsoft.com/demos/embed/8JZBCYWV
https://app.zingsoft.com/demos/embed/8JZBCYWV

The following styling is 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"
                }
            }
        }
    }
https://app.zingsoft.com/demos/embed/3YQHR7W7
https://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.