☰

Options

Configuration Structure

Options: {
  canvasStyle: string,
  enableToolbar: boolean,
  height: number | string,
  spacing: number,
  viewPortHeight: number,
  viewPortWidth: number,
  width: number | string,
  edgeGap: number,
  edgeGradientFill: boolean,
  edgeOpacity: number,
  fontColor: string,
  fontFamily: string,
  fontSize: string,
  fontWeight: string,
  highlightConnectedPath: boolean,
  dimOpacity: number,
  animation: { ... },
    enabled: boolean,
    duration: number,
  whitespace: number,
  nodeBorderColor: string | null,
  nodeBorderWidth: number,
  nodeWidth: number,
  onNodeClick: Function,
  enableTooltip: boolean,
  tooltipBGColor: string,
  tooltipBorderColor: string,
  tooltipFontColor: string,
  tooltipId: string,
  tooltipTheme: 'dark' | 'light',
  tooltipTemplate: Function,
  nodeTooltipTemplate: Function,
  a11y: { ... },
    enabled: boolean,
    diagramLabel: string,
    description: string,
}

width

Default: '100%'

Width of the canvas. Accepts a pixel number or CSS percentage string.

height

Default: 'auto'

Height of the canvas. Use 'auto' to derive height from width at a 1.6:1 ratio.

canvasStyle

Default: 'border: 1px solid #caced0; box-sizing: border-box'

Arbitrary CSS injected onto the SVG root container element.

spacing

Default: 20

Horizontal spacing between node columns in pixels.

enableToolbar

Default: true

Show the zoom/pan toolbar.

viewPortWidth

Default: 800

Internal SVG viewport width in pixels.

viewPortHeight

Default: 500

Internal SVG viewport height in pixels.

nodeWidth

Default: 20

Width of each node rectangle in pixels.

nodeBorderWidth

Default: 1

Border width of each node in pixels.

nodeBorderColor

Default: null

CSS color for the node border. Set to null to disable.

onNodeClick

Callback fired when the user clicks a node. Receives a SankeyNode object.

onNodeClick: (node) => {
  console.log('Clicked node:', node);
}

edgeOpacity

Default: 0.4

Opacity of edges (0–1).

edgeGradientFill

Default: true

When true, edges are filled with a gradient between source and target node colors.

edgeGap

Default: 2

Gap in pixels between adjacent edges at their node connection points.

whitespace

Default: 0.18

Fraction of vertical space used as margins between nodes (0–1). Lower values produce taller, more compact nodes; higher values add more padding between them.

highlightConnectedPath

Default: true

When true, hovering a node or edge highlights the connected flow path.

dimOpacity

Default: 0.2

Opacity for dimmed (unrelated) elements when path highlighting is active.

animation

Entrance animation options. Animation is automatically disabled when prefers-reduced-motion is set.

enabled

Options.animation.enabled
Default: true

Whether entrance animation is enabled.

duration

Options.animation.duration
Default: 800

Total duration of the animation in milliseconds.

enableTooltip

Default: true

Show edge tooltips on hover.

tooltipId

Default: 'apexsankey-tooltip-container'

HTML id for the tooltip container element.

tooltipBGColor

Default: '#FFFFFF'

Background color of the tooltip.

tooltipBorderColor

Default: '#E2E8F0'

Border color of the tooltip.

tooltipFontColor

Default: '#1a1a1a'

Font color inside the tooltip.

tooltipTheme

Shortcut for dark/light color presets — overrides tooltipBGColor, tooltipBorderColor, and tooltipFontColor with built-in presets.

Available Options:

  • light
  • dark

tooltipTemplate

Custom function returning an HTML string for the edge (source→target) tooltip.

tooltipTemplate({ source, target, value }) {
  return `
    <div style='display:flex;align-items:center;gap:5px;'>
      <div style='width:12px;height:12px;background:${source.color}'></div>
      <span>${source.title}</span>
      <span>→</span>
      <div style='width:12px;height:12px;background:${target.color}'></div>
      <span>${target.title}</span>
      <span>: ${value}</span>
    </div>
  `;
}

nodeTooltipTemplate

Custom function returning an HTML string for the per-node tooltip.

nodeTooltipTemplate({ node, value }) {
  return `
    <div style='display:flex;align-items:center;gap:5px;'>
      <div style='width:12px;height:12px;background:${node.color}'></div>
      <span>${node.title}</span>
      <span>: ${value}</span>
    </div>
  `;
}

fontColor

Default: '#212121'

CSS color for node labels.

fontFamily

Default: ''

CSS font-family for node labels. Falls back to the page default when empty.

fontSize

Default: '14px'

CSS font-size for node labels.

fontWeight

Default: '400'

CSS font-weight for node labels.

a11y

WCAG 2.1 AA accessibility options.

enabled

Options.a11y.enabled

Whether accessibility features are enabled.

diagramLabel

Options.a11y.diagramLabel

Overrides the auto-generated aria-label on the SVG root.

description

Options.a11y.description

Populates the <desc> element for a longer optional description.