Node and Link Ordering

ApexSankey lays out every diagram automatically. You supply nodes and edges; the library decides which column each node sits in and the order of nodes within each column. This page explains how those two decisions are made and what you can change.

How nodes are placed

Layout runs in two steps every time you call render() or update():

1. Columns. Each node's column (its rank) is assigned from the edges, so flows run left to right: a node sits to the right of the nodes that flow into it. A circular link cannot satisfy that, so it is drawn as a dashed back-edge returning upstream instead.
2. Order within a column. A crossing-minimization pass then reorders the nodes in each column to reduce the number of ribbons that cross each other.

With orientation: 'vertical' the same layout is turned on its side: columns become rows and flows run top to bottom.

const sankey = new ApexSankey(document.getElementById('chart'), {
  orientation: 'vertical',
})
sankey.render(data)

There is no order option

Earlier versions of this page documented an order array passed in data.options to pin columns and vertical order. ApexSankey 1.12 does not read it, and 1.12.4 removes the unused layout code behind it. The library has no public option for a fixed order, and a diagram rendered with an order array lays out exactly as it does without one. If you copied that pattern, it is safe to delete.

Adjusting a layout by hand

When the automatic order is close but not quite what you want, let the reader move nodes. With draggableNodes: true a node can be dragged with a mouse, touch, or pen, and its connected flows follow it live:

const sankey = new ApexSankey(document.getElementById('chart'), {
  draggableNodes: true,
})
sankey.render(data)

A dragged position holds until the next render() or update(), which recomputes the layout. Dragging is a Sankey-only feature; it does not apply to chord diagrams.

React example

import { ApexSankey } from 'react-apexsankey'

const data = {
  nodes: [
    { id: 'a', title: 'A' },
    { id: 'b', title: 'B' },
    { id: 'c', title: 'C' },
    { id: 'd', title: 'D' },
  ],
  edges: [
    { source: 'a', target: 'c', value: 20, type: 'flow' },
    { source: 'b', target: 'c', value: 15, type: 'flow' },
    { source: 'c', target: 'd', value: 35, type: 'flow' },
  ],
}

export default function DraggableSankey() {
  return <ApexSankey data={data} options={{ nodeWidth: 20, draggableNodes: true }} />
}