Export

ApexSankey exports the diagram as an SVG file. Export is available through the built-in toolbar or programmatically via the graph renderer.

Built-in toolbar

The toolbar renders inside the chart container and includes an export button. It is shown by default (enableToolbar: true):

const sankey = new ApexSankey(document.getElementById('chart'), {
  enableToolbar: true,   // default — export button is visible
})
sankey.render(data)

Disabling the toolbar

Set enableToolbar: false to hide the toolbar. Do this when you want to provide your own export control or embed the diagram without any chrome:

const sankey = new ApexSankey(el, {
  enableToolbar: false,
})

Programmatic export

render() returns the internal graph renderer, which exposes exportToSvg(). Call it from your own button to trigger an SVG download:

const sankey = new ApexSankey(el, { enableToolbar: false })
const graph = sankey.render(data)

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

This is the pattern to use when enableToolbar is off but you still want export, or when you want the export trigger to live elsewhere in your UI (a menu, a keyboard shortcut, etc.).

Full example with a custom export button

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

const graph = sankey.render({
  nodes: [
    { id: 'a', title: 'Source', color: '#3B82F6' },
    { id: 'b', title: 'Target', color: '#10B981' },
  ],
  edges: [
    { source: 'a', target: 'b', value: 50, type: 'flow' },
  ],
})

document.getElementById('download').addEventListener('click', () => {
  graph.exportToSvg()
})

<button id="download">Download SVG</button>
<div id="chart"></div>

React example

In React, reach the renderer through the component ref:

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

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

  return (
    <div>
      <button onClick={() => (ref.current?.graph as any)?.exportToSvg?.()}>
        Download SVG
      </button>
      <ApexSankey
        ref={ref}
        data={data}
        options={{ enableToolbar: false }}
      />
    </div>
  )
}

Vue example

<template>
  <div>
    <button @click="exportSvg">Download SVG</button>
    <ApexSankey ref="sankeyRef" :data="data" :options="{ enableToolbar: false }" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ApexSankey from 'vue-apexsankey'

const sankeyRef = ref()

const exportSvg = () => {
  sankeyRef.value?.graph?.exportToSvg?.()
}
</script>