Options

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

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

Which projection of the flow model to draw. Both read the same { nodes, edges } data.

Available Options:

• sankey (default): the layered diagram, ranks in columns or rows
• chord: a radial diagram with nodes as arcs on a ring and flows as ribbons across the interior, for dense many-to-many relationships

See Chord Diagrams.

Flow direction of the diagram.

Available Options:

• horizontal (default): ranks in columns, flows left to right
• vertical: ranks in rows, flows top to bottom

See Orientation and Circular Links.

Chord only. Corner radius in pixels for the rounded outer corners of each node arc on the ring; the inner edge where ribbons meet stays flush. 0 gives sharp corners, and the value is clamped to the ring band width.

A named built-in theme, a name registered via ApexSankey.registerTheme, or an inline theme object. A theme seeds coordinated visual defaults (palette, colors, background); options you set explicitly still win.

Available Options:

• light, dark, midnight, mint, sunset: built-in presets
• any name passed to ApexSankey.registerTheme(name, theme)
• an inline object with nodePalette, fontColor, edgeOpacity, edgeGradientFill, nodeBorderColor, canvasStyle and tooltipTheme

Defaults to the light appearance when unset. See Themes.

Ordered fill colors cycled across nodes that do not set their own color. Overrides the built-in palette, and a theme sets it for you.

Titles drawn above each column, or beside each row when vertical: one per rank, which are the axis labels of an alluvial diagram. Index i labels rank i; omit or leave the array short to skip trailing axes. See Alluvial Diagrams.

Arbitrary CSS injected onto the SVG root container element.

Horizontal spacing between node columns in pixels.

Show the zoom/pan toolbar.

Internal SVG viewport width in pixels.

Internal SVG viewport height in pixels.

Width of each node rectangle in pixels.

Border width of each node in pixels.

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

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

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

Opacity of edges (0–1).

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

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

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.

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

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

Allow nodes to be repositioned by dragging with a pointer, supporting mouse, touch and pen. Connected flows follow the node live, and the manual position holds until the next render() or update() recomputes the layout.

Available Options:

• false (default)
• true

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

Whether entrance animation is enabled.

Total duration of the animation in milliseconds.

Animate particles drifting along each flow ribbon, with density proportional to the ribbon's value. Purely decorative, and skipped under prefers-reduced-motion.

Available Options:

• false (default)
• true

See Particle Flow.

Show edge tooltips on hover.

HTML id for the tooltip container element.

Background color of the tooltip.

Border color of the tooltip.

Font color inside the tooltip.

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

Available Options:

• light
• dark

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>
  `;
}

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>
  `;
}

CSS color for node labels.

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

CSS font-size for node labels.

CSS font-weight for node labels.

WCAG 2.1 AA accessibility options.

Whether accessibility features are enabled.

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

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

Localization and text-direction options. See Localization and RTL for worked examples.

Text and layout direction. 'rtl' mirrors the diagram horizontally so flows read right-to-left and sets dir="rtl" on the container. 'auto' defers to the document or element's inherited direction.

Available Options:

• ltr (default)
• rtl
• auto

Overrides for the screen-reader strings the diagram generates. Supply any subset; unset keys keep their English defaults (exported as DEFAULT_SANKEY_MESSAGES). Visible tooltips are localized separately through tooltipTemplate and nodeTooltipTemplate.

Builds the SVG root aria-label. Receives { nodeCount, flowCount, largestFlow? }, where largestFlow is { source, target, value } when a value-bearing flow exists.

Builds an edge's aria-label. Receives { source, target, value }.

Builds a node's aria-label. Receives { name, incoming?, outgoing? }, where incoming is { total, sources } and outgoing is { total, targets }.

aria-label for the group element wrapping all nodes.