--- title: "Chord diagram" description: "Cross-category links. What the chord diagram is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-chord" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Cross-category links. It sits in the **Flow & network** group of the widget library. ![Example chord diagram on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/chord.380d8097065f3bef.png) ## 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](/docs/widgets/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](/docs/widgets/chart-styling#legend): position, layout and which series show. - [Axes](/docs/widgets/chart-styling#axes): titles, tick labels and number format. - [Grid](/docs/widgets/chart-styling#grid), [title](/docs/widgets/chart-styling#title), [padding](/docs/widgets/chart-styling#padding) and [background](/docs/widgets/chart-styling#background). - [Value labels](/docs/widgets/chart-styling#value-labels) on the marks. - [Categories and labels](/docs/widgets/chart-styling#categories-and-labels): top N with "Other", sort order, readable labels, the handwritten callout. - [Style](/docs/widgets/chart-styling#style): corner radius, line width, opacity and animation. - [Tooltip](/docs/widgets/chart-styling#tooltip) on hover. - Click to filter: clicking a mark can filter the rest of the dashboard. See [Filters and cross-filtering](/docs/dashboards/filters-and-cross-filtering). - [Colours](/docs/widgets/chart-styling#palette): 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](/docs/widgets/chart-sankey): Flows between nodes - [Alluvial](/docs/widgets/chart-alluvial): Multi-stage flow - [Network graph](/docs/widgets/chart-network): Force-directed nodes + edges - [Arc diagram](/docs/widgets/chart-arc): Linear node arcs