--- title: "Sankey" description: "Flows between nodes. What the sankey is for, the data it needs and every option it has." section: "Widgets" canonical: "https://banksync.io/docs/widgets/chart-sankey" specs: ["dashboards"] operationBindings: [{"capability":"dashboards","operation":"dashboards.author"}] --- Flows between nodes. It sits in the **Flow & network** group of the widget library. ![Example sankey on a BankSync dashboard](https://cdn.banksync.io/screenshots/docs/charts/sankey.a5e50fb63910a2de.png) ## When to use it A Sankey shows money moving from sources to targets, with each band's width showing the amount. It answers "how does cash flow from my accounts into spending categories?". Each row names a source, a target and, optionally, an amount. ## When to pick something else - Following items through three or more ordered steps? Use an **Alluvial**. - Two-way flows among a few accounts? Use a **Chord diagram**. - Only the totals matter? Use a **Bar chart**. ## 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). ## Sankey 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 | | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------- | | **Flow colour** | Colour each flow like the node it leaves, the node it reaches, or a gradient between the two. | Source, Target, Gradient | Gradient | | **Node alignment** | Which column a node is placed in: pushed left, pushed right, centred, or spread so end nodes sit at the far right. | Left, Right, Center, Justify | Justify | | **Node width** | Width of each node bar, in pixels. | Number, 0 or more | Automatic | | **Node gap** | Vertical space between nodes in the same column, in pixels. | Number, 0 or more | Automatic | | **Show labels** | Write each node’s name beside it. | On or off | Automatic | | **Label size** | Text size of the node 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 | | **Show node totals** | Add each node’s total flow after its name. | On or off | Automatic | | **Flow opacity** | How solid the flows are, from 0 (clear) to 1 (solid). | Number, 0 to 1 | 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 - Only positive amounts become flows. Zero and negative amounts are skipped, so if money out is stored as negative, read the value as spending first. - Rows with a blank source or target, and flows from a node to itself, are skipped. With nothing left you see "No flows to show". - Repeated source-target pairs are added into one band. - A loop, like checking to savings and back, is drawn to a copy marked "Flows back to this node". - Small nodes in a crowded column fold into "Other (n)". About 20 nodes are kept. ## On a phone A phone card leaves little room between columns, so node labels are dropped when the gap gets too narrow and you tap to read them. Keep it to two columns with a few nodes each, or use a **Bar chart** of totals on phones. ## Related charts - [Chord diagram](/docs/widgets/chart-chord): Cross-category links - [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