Search

React ChartsChord Series

A Chord Series visualises movement or change between different items, using nodes and links.

Simple Chord

To create a Chord Series, use the chord series type.

series: [
    {
        type: 'chord',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
    },
],

In this configuration:

  • fromKey defines the start node of each link.
  • toKey defines the end node of each link.
  • sizeKey defines the size of each link.

Customisation

Node Style

The styling of all nodes can be customised using the node property.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
        node: {
            fill: '#34495e',
            stroke: '#2c3e50',
            strokeWidth: 2,
        },
    },
],

The styling of all links can be customised using the link property.

series: [
    {
        type: 'sankey',
        fromKey: 'from',
        toKey: 'to',
        sizeKey: 'size',
        link: {
            fill: '#34495e',
            fillOpacity: 0.25,
            stroke: '#2c3e50',
            strokeWidth: 1,
            strokeOpacity: 0.25,
        },
    },
],

API Reference