React ChartsChord Series

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

Simple Chord Copy Link

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 Copy Link

Node Style Copy Link

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

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

Link Style Copy Link

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

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

API Reference Copy Link