Chord diagram
Cross-category links. What the chord diagram is for, the data it needs and every option it has.
4 min read
On this page
Cross-category links. It sits in the Flow & network group of the widget library.
When to use it#
A Chord diagram shows two-way flows among a small set of peers arranged on a circle. It answers "how much moves between each pair of accounts, in each direction?", such as transfers among checking, savings, a credit card and a brokerage account. Each arc is what that account sends plus what it receives.
When to pick something else#
- Flows only go one way? A Sankey reads more easily.
- Care whether accounts connect, not how much? Use a Network graph.
- Need exact amounts per pair? Use a Heatmap matrix or a Table.
The data it needs#
Pick these in the Data tab of the inspector. BankSync suggests a column for each when your source has an obvious match.
| Field | Needed | Pick | Notes |
|---|---|---|---|
| Source | Yes | a category | |
| Target | Yes | a category | |
| Value | Yes | a number |
Rows that share a category are combined before drawing: choose Sum, Average, Count, Min or Max on the value field. See Binding data.
Chord diagram options#
Set these on the Style tab of the inspector. "Automatic" means BankSync picks a value from the chart's size and data.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Group gap | Space between the groups around the circle, as an angle in radians. 0.04 is a small gap. | Number, 0 or more | 0.04 |
| Show labels | Write each group’s name around the outside of the circle when there is room. | On or off | Automatic |
| Label size | Text size of the group labels, in pixels (kept between 8 and 16). | Number | Automatic |
| Label colour | Colour of the label text. Leave empty for an automatic, readable colour. | Colour | Automatic |
| Ring thickness | Thickness of the outer ring of group arcs, in pixels. | Number, 0 or more | Automatic |
| Ribbon opacity | How solid the connecting ribbons are, from 0 (clear) to 1 (solid). | Number, 0 to 1 | Automatic |
| Sort by size | Order the groups around the circle from largest to smallest. | On or off | Automatic |
Needs history#
Show a note instead of the chart until the rows cover enough periods, so a first week never reads as a trend.
| Option | What it does | Values | New charts start with |
|---|---|---|---|
| Date field | The date column whose distinct periods are counted. | Text | Automatic |
| Period | What counts as one period: a day, week, month, quarter or year. | Day, Week, Month, Quarter, Year | Automatic |
| Periods needed | How many distinct periods the rows must cover before the chart draws (2 to 60). | Whole number, 2 to 60 | Automatic |
| Waiting message | Shown until there is enough history. Leave empty for a message naming the periods. | Text, up to 120 characters | Automatic |
Shared chart styling#
Every chart also has the shared styling options. These apply to this one:
- Legend: position, layout and which series show.
- Axes: titles, tick labels and number format.
- Grid, title, padding and background.
- Value labels on the marks.
- Categories and labels: top N with "Other", sort order, readable labels, the handwritten callout.
- Style: corner radius, line width, opacity and animation.
- Tooltip on hover.
- Click to filter: clicking a mark can filter the rest of the dashboard. See Filters and cross-filtering.
- Colours: follow the dashboard palette or pick one for this chart.
Messy data#
- Zero and negative amounts, and rows with a blank source or target, are skipped. With nothing left you see "No flows to show".
- A flow from an account to itself is kept and shown as "Within" in its tooltip.
- The 12 largest groups are kept, and the rest fold into "Other (n)".
- Labels are trimmed to fit. When they collide, the smallest group's label is dropped first.
On a phone#
The circle is sized to the shorter side of the card. When there isn't room for labels it draws the ring alone, and you tap an arc to see its name. With more than five or six groups, use a Bar chart of totals on phones.
Related charts#
- Sankey: Flows between nodes
- Alluvial: Multi-stage flow
- Network graph: Force-directed nodes + edges
- Arc diagram: Linear node arcs
Use this page with your AI assistant
Every BankSync doc is available as plain Markdown for agents and LLMs.