Skip to content

Graph Panel

GraphPreview
ANZASBFoodSaveRent

A force-directed graph visualisation of money flows between accounts and categories. Nodes represent accounts and expense categories; edges represent transaction flows between them.

What It Shows

  • Nodes -- bank accounts and spending categories, sized by transaction volume
  • Edges -- transaction flows between accounts and categories, width scaled by flow amount
  • Adjacency highlighting -- hovering a node highlights its connected edges

Node Colouring

Account TypeColour
Cheque / SavingsGreen (accent)
CreditRed
InvestmentAmber
CategoriesPer-category colour
  • Click and drag -- pan across the canvas
  • Scroll wheel -- zoom toward the cursor (0.1x to 15x)
  • Fit-to-bounds -- auto-fits on load; re-centre via the header button
  • Drag nodes -- reposition individual nodes within the layout

Settings Sidebar

A collapsible sidebar (toggled via the gear icon) with five sections:

Filters

  • Text filter -- filter nodes by name
  • Accounts toggle -- show or hide account nodes
  • Categories toggle -- show or hide category nodes
  • Orphans toggle -- show or hide nodes with no connections

Groups

  • Grouping mode -- by Type, by Bank, by Category Type, or None
  • Colour groups -- custom search-query-to-colour mappings

Display

Adjust labels, arrows, node size, link thickness, label size, label opacity, node opacity, link style (straight, curved, dashed), and node shape (circle, square, rounded square, diamond).

Forces

Tune centre force (gravity), repel force, link distance (min/max), and friction to change how the graph arranges itself.

Restore Defaults

Resets all settings back to their initial values.

Empty State

Displays "No transaction data" when there are no transactions to visualise.