Layout and Spacing

ApexSankey lays out nodes into columns and distributes them vertically to fit the canvas. A handful of options control the canvas size, the spacing between columns, and how much whitespace separates nodes.

Canvas dimensions

Option	Type	Default	Description
width	number | string	'100%'	Canvas width — a pixel number or a CSS percentage
height	number | string	'auto'	Canvas height; 'auto' derives it from the width at a 1.6:1 ratio

const sankey = new ApexSankey(document.getElementById('chart'), {
  width: '100%',
  height: 500,
})
sankey.render(data)

With height: 'auto', a 800px-wide canvas becomes 500px tall (800 / 1.6). Set an explicit height when you need a specific aspect ratio.

Column spacing

spacing sets the horizontal distance between node columns in pixels. Larger values stretch the diagram horizontally and lengthen the edges:

const sankey = new ApexSankey(el, {
  spacing: 40,   // default: 20
})

Node whitespace

whitespace controls the fraction of vertical space used as margins between node rectangles, from 0 to 1. Lower values produce taller, more compact nodes; higher values add more padding:

const sankey = new ApexSankey(el, {
  whitespace: 0.18,   // default
})

whitespace	Effect
0.05	Very tall nodes, minimal gaps
0.18 (default)	Balanced
0.4	Short nodes, generous vertical gaps

Node width

nodeWidth sets the width of each node rectangle. It affects visual weight but not the layout column positions (those are driven by spacing):

const sankey = new ApexSankey(el, {
  nodeWidth: 24,   // default: 20
})

Internal viewport

The internal SVG viewport defines the coordinate space the diagram is drawn into before it is scaled to fit the canvas. Adjust these when a very large or very small diagram needs a different internal resolution:

Option	Type	Default	Description
viewPortWidth	number	800	Internal SVG viewport width in pixels
viewPortHeight	number	500	Internal SVG viewport height in pixels

const sankey = new ApexSankey(el, {
  viewPortWidth: 1200,
  viewPortHeight: 700,
})

Container styling

canvasStyle injects arbitrary CSS onto the SVG root container element — useful for borders, background, and box-sizing:

const sankey = new ApexSankey(el, {
  canvasStyle: 'border: 1px solid #E2E8F0; border-radius: 8px; background: #fff;',
})

Complete layout example

const sankey = new ApexSankey(document.getElementById('chart'), {
  width: '100%',
  height: 520,
  spacing: 32,
  whitespace: 0.15,
  nodeWidth: 22,
  viewPortWidth: 1000,
  viewPortHeight: 560,
  canvasStyle: 'border: 1px solid #E2E8F0; border-radius: 8px;',
})
sankey.render(data)

React example

import { ApexSankey } from 'react-apexsankey'

const options = {
  width: '100%',
  height: 520,
  spacing: 32,
  whitespace: 0.15,
  nodeWidth: 22,
  canvasStyle: 'border: 1px solid #E2E8F0; border-radius: 8px;',
}

export default function LayoutSankey() {
  return <ApexSankey data={data} options={options} />
}

Responsive width

Use a percentage width and the diagram scales to its container. Combine with a fixed pixel height for a consistent vertical footprint across breakpoints:

const sankey = new ApexSankey(el, {
  width: '100%',   // fills the container
  height: 480,     // fixed height
})