Methods

An ApexSankey instance is created with new ApexSankey(element, options) and drawn with render(data). The render() call returns the internal graph renderer, which exposes methods for re-rendering and export.

Constructor

import { ApexSankey } from 'apexsankey'

const container = document.getElementById('chart')
const sankey = new ApexSankey(container, {
  width: 800,
  height: 500,
  nodeWidth: 20,
})

The constructor applies dimensions to the host element immediately but does not draw anything. Call render() to build the SVG.

Parameter	Type	Description
element	HTMLElement	Container element for the diagram SVG
options	Partial<SankeyOptions>	Configuration; any omitted field falls back to its default

render(data)

Builds the Sankey diagram inside the container. Returns the internal SankeyGraphRenderer instance.

const graph = sankey.render({
  nodes: [
    { id: 'a', title: 'Source A' },
    { id: 'b', title: 'Target B' },
  ],
  edges: [
    { source: 'a', target: 'b', value: 42, type: 'flow' },
  ],
})

data field	Type	Description
nodes	SankeyGraphNode[]	Entities: { id, title, color? }
edges	SankeyGraphEdge[]	Flows: { source, target, value, type }. value sets band width
options	object	Optional data-level layout options (see Node and Link Ordering)

render() throws if the container element is not found.

graph.render(options)

Re-draw the diagram using the renderer returned by render(data). Pass keepOldPosition: true to preserve the current node layout across a re-render instead of recomputing positions from scratch.

const graph = sankey.render(data)

// later — re-render without recomputing the layout
graph.render({ keepOldPosition: true })

Option	Type	Default	Description
keepOldPosition	boolean	false	Keep the existing node positions instead of recomputing the layout

graph.exportToSvg()

Export the current diagram as an SVG file. Triggers a browser download.

const graph = sankey.render(data)

document.getElementById('export-btn').addEventListener('click', () => {
  graph.exportToSvg()
})

The built-in toolbar already includes an export button when enableToolbar is true (the default). Use exportToSvg() directly only when you need a custom export trigger. See the Export guide for details.

graph.getMessages()

Returns the resolved, localized screen-reader strings for this diagram (English defaults merged with locale.messages).

const graph = sankey.render(data)

const messages = graph.getMessages()

destroy()

Destroys the chart instance and cleans up its DOM and internal resources.

sankey.destroy()

Call this before removing the container from the DOM, or in a framework component's unmount/cleanup phase, to avoid leaking listeners.

getInstanceId()

Returns the unique identifier for this chart instance.

const id = sankey.getInstanceId()

ApexSankey.setLicense(key)

Static method. Sets the global ApexCharts license key. Call it once at app startup, before creating any chart instance. Without a valid license the chart renders with a watermark.

import { ApexSankey } from 'apexsankey'

ApexSankey.setLicense('YOUR_LICENSE_KEY')

See Setting the License for framework-specific patterns.

Re-rendering with new data

To update the diagram with a fresh dataset, call render(data) again with the new data. Use graph.render({ keepOldPosition: true }) only when the node set is unchanged and you want to avoid a layout reflow.

let graph = sankey.render(initialData)

async function reload() {
  const data = await fetchLatest()
  graph = sankey.render(data)   // full re-layout with new nodes/edges
}

Framework wrappers

In React, the ApexSankey component exposes the graph renderer through a ref:

import { useRef } from 'react'
import { ApexSankey } from 'react-apexsankey'
import type { ApexSankeyRef } from 'react-apexsankey'

export default function Diagram() {
  const ref = useRef<ApexSankeyRef>(null)

  return (
    <div>
      <button onClick={() => ref.current?.graph?.render({ keepOldPosition: true })}>
        Re-render
      </button>
      <ApexSankey ref={ref} data={data} options={options} />
    </div>
  )
}

The React and Vue wrappers call destroy() automatically on unmount, so you do not need to manage cleanup manually.