Skip to main content

Chord Diagram

One month of data transfer between the six cloud regions of a SaaS product, both directions combined: each arc is a region, sized by all of its traffic, and each ribbon is the traffic between two regions.

Hover the arcs and ribbons, switch the site theme or resize the window
Pick a preset to reconfigure every chart
TanStack Chartsv1.1.0
Not available

TanStack Charts has no chord layout or ribbon mark. Its polar marks can draw the arcs, but the ribbons would need a custom mark that draws each path, laid out with d3-chord.

Source
Rechartsv3.10.1
Not available

Recharts has no chord chart. Its charts are Area, Bar, Composed, Funnel, Line, Pie, Radar, RadialBar, Sankey, Scatter, Sunburst and Treemap.

Source
Chart.jsv4.5.1
Not available

Chart.js has no chord chart type, and there is no maintained plugin for one, so it would take a custom controller.

Source
AG Chartsv14.2.0
Only in the paid edition

The Chord series is part of AG Charts Enterprise.

Source
Observable Plotv0.6.17
Not available

Observable Plot has no chord layout and no arc or ribbon mark, so the arcs and ribbons would have to be computed with d3-chord and drawn in a custom render function.

Source
Vega-Litev6.5.0
Not available

Vega-Lite has no chord layout and no ribbon mark, so the ribbons would have to be computed with d3-chord and drawn as geoshape polygons with an identity projection.

Source

What to look for​

  • Who can draw it. Three of the nine libraries have a chord diagram. AG Charts has one in its paid Enterprise edition; TanStack Charts, Recharts, Chart.js, Observable Plot and Vega-Lite have none.
  • The data. Unovis and ECharts take the same list of nodes and links as their Sankey diagrams (ECharts links them by name). Nivo takes a square matrix, so the demo builds one from the links and fills both cells of every pair.
  • Colors and labels. ECharts and Nivo give every region a palette color and paint its ribbons with it; Unovis draws the nodes in its main color and the ribbons in a pale blue, so its demo sets nodeColor and linkColor. Unovis curves the labels along the arcs and trims them to fit, ECharts writes them horizontally outside the ring, and Nivo along the outside of it.
  • Hover a region or a ribbon. All three highlight its ribbons, fade the rest and show a tooltip. Nivo's ribbon tooltip lists the value at both ends.
  • Randomize the data. The arcs and ribbons of all three animate to their new sizes.
  • Presets. Grouped by continent (nodeLevels) adds a ring of continent arcs, which only Unovis can draw: ECharts and Nivo take a flat list of nodes. Radial labels (nodeLabelAlignment) is Nivo's labelRotation. ECharts' chord series ignores label.rotate, so its demo turns each label with a labelLayout callback and computes the arc angles from the data itself. Thick arcs (nodeWidth, padAngle) is a pair of options in all three.

Feature comparison​

FeatureUnovis1.8.0Recharts3.10.1Chart.js4.5.1ECharts6.1.0Nivo0.99.0AG Charts14.2.0Observable Plot0.6.17Vega-Lite6.5.0TanStack Charts1.1.0
Chord diagram
Sankey
Tooltip
Animated data updates
Dark mode

Every cell links to its source. See how we compare for the rules we followed.