Chart 11 of 15

Flow (sources to uses)

Use it to show the shape of a budget: income sources on the left, spending categories on the right. Each source is split across the uses in proportion, so it shows mix, not exact routing.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

The chart is a labelled picture; the table view lists every source and use with amounts.

How to use it

JavaScript
const chart = flow({
  left: [
    { label: 'Salary',    value: 3100 },
    { label: 'Side gigs', value: 450 }
  ],
  right: [
    { label: 'Housing',   value: 1210, colour: catColor('Housing') },
    { label: 'Groceries', value: 438,  colour: catColor('Groceries') },
    { label: 'Saved',     value: 1900, colour: 'var(--c9)' }
  ],
  height: 340,
  label: 'Where September money went'
});

Options

left
[{ label, value }] sources (drawn green).
right
[{ label, value, colour }] uses; the colour tints the ribbons.
height
Chart height. Width and label space follow the container.
label
aria-label. If either side is empty the chart shows a short sentence instead.