AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsChord Series

Version 14.2.0

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,
            },
        },
    ],
}

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,
            },
        },
    ],
}

Chord Chart Examples Copy Link

See more Chord Chart examples in the AG Charts Gallery.

Chord Chart Example
Customised Chord Chart Example

API Reference Copy Link

Properties available on the AgChordSeriesOptions interface.

type required 'chord'
Configuration for the Chord Series.
getItemId Function
A callback to provide a stable identifier for each node, exposed as `itemId` in events and active state. The returned identifier must be unique across nodes and links, which share one `itemId` namespace (links default to `link-<index>`). If not supplied, the node name is used as its identifier.
id string default: auto-generated value
Primary identifier for the series. This is provided as `seriesId` in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique `id` value.
context ContextDefault
Context object to use in callbacks.
data DatumDefault[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible boolean
Whether to display the series.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
highlight AgHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
showInLegend boolean
Whether to include the series in the legend.
listeners AgSeriesListeners
A map of event names to event listeners.
fromKey string
The key containing the start node of each link.
toKey string
The key containing the end node of each link.
sizeKey string
The key containing the size of each link.
sizeName string
A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
label AgChordSeriesLabelOptions
Options for the label for each node.
fills AgColorType[]
The colours to cycle through for the fills of the nodes and links. An array of colour strings, or fill objects for gradients, patterns, or images.
strokes CssColor[]
The colours to cycle through for the strokes of the nodes and links.
link AgChordSeriesLinkOptions
Options for the links.
node AgChordSeriesNodeOptions
Options for the nodes.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.