Skip to main content

Visualizing Income, Expenses, and Profit with a Sankey Diagram

A Sankey diagram is a type of flow diagram where the Link thickness is proportional to the flow quantity. Sankey diagrams can be used to easily visualize a company's financials through the flow of income and the allotting of expenses.

This sample uses a custom FinancialSankeyLayout extending DoubleTreeLayout, placing Revenue at the center with revenue sources to the left and profit/cost breakdowns to the right.

Edit the diagram by clicking on a node. Click delete to remove a node and its children, or add/expenses to create a new leaf node. On leaf nodes, click the amount to edit it. On all nodes the title can be edited by clicking on it. Internal nodes cannot have their amount edited due to it being variable based on the leaf nodes instead of a constant value.

GoJS Features in this sample

Links

The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS learn pages.

Related samples

Custom Layouts

GoJS allows for the creation of custom layouts to meet specific needs.

There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library, but available as source code in one of the three extension directories, with some documentation and corresponding samples. More information can be found in the GoJS learn pages.

Related samples