Print and Export in Vue Sankey Chart component

18 Nov 201824 minutes to read

The Sankey Chart provides comprehensive print and export functionality, enabling users to generate static files in multiple formats (PNG, JPEG, SVG, PDF) or print the diagram directly. This is useful for reports, documentation, sharing, and offline access.

This guide covers printing the chart and exporting to various formats with customization options.

Print

Print the Sankey Chart directly to paper or PDF using the print() method. This opens the browser’s print dialog, allowing users to select printer settings and output format:

Composition API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="printChart" style="margin-bottom: 10px;">
        Print
      </button>

      <EjsSankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const sankeyRef = ref(null);


function printChart() {
  const c = sankeyRef.value;
  if (!c) return;
  if (typeof c.print === 'function') {
    c.print();
  } else if (c.ej2Instances && typeof c.ej2Instances.print === 'function') {
    c.ej2Instances.print();
  } else {
    console.error('print() not found on wrapper or ej2Instances');
  }
}

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container { height: 450px; }
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handlePrint" style="margin-bottom: 10px;">
        Print
      </button>

      <ejs-sankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
    handlePrint() {
      
      const c = this.$refs.sankeyRef;
      if (c && typeof c.print === 'function') {
        c.print();
      } else if (c && c.ej2Instances && typeof c.ej2Instances.print === 'function') {
        c.ej2Instances.print();
      } else {
        console.error('print() not found on the Sankey wrapper or ej2Instances');
      }
    }
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container { height: 450px; }
</style>

Export

Export the Sankey Chart to various file formats using the export() method. This allows you to generate standalone files suitable for sharing, archiving, or embedding in documents.

Export Formats

The Sankey Chart supports exporting to the following formats:

• PNG – Portable Network Graphics (raster format, good for web)
• JPEG – Joint Photographic Experts Group (compressed raster, smaller file size)
• SVG – Scalable Vector Graphics (vector format, scalable without quality loss)
• PDF – Portable Document Format (ideal for printing and archiving)

Export with Default Settings

Export the chart using default settings with a default filename:

Composition API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="exportPNG" style="margin-right: 5px;">Export PNG</button>
      <button @click="exportPDF" style="margin-right: 5px;">Export PDF</button>
      <button @click="exportSVG" style="margin-bottom: 10px;">Export SVG</button>

      <EjsSankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const sankeyRef = ref(null);


function doExport(format, fileName) {
  const c = sankeyRef.value;
  if (!c) return;

  const proxied = typeof c.export === 'function' ? c.export.bind(c) : null;
  const instance = c.ej2Instances?.export ? c.ej2Instances.export.bind(c.ej2Instances) : null;

  (proxied || instance)?.(format, fileName);
}

function exportPNG() { doExport('PNG', 'Sankey'); }
function exportPDF() { doExport('PDF', 'Sankey'); }
function exportSVG() { doExport('SVG', 'Sankey'); }

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleExportPNG" style="margin-right: 5px;">Export PNG</button>
      <button @click="handleExportPDF" style="margin-right: 5px;">Export PDF</button>
      <button @click="handleExportSVG" style="margin-bottom: 10px;">Export SVG</button>

      <ejs-sankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
   
doExport(format, fileName) {
      const c = this.$refs.sankeyRef;
      if (!c) return;

      const proxied = typeof c.export === 'function' ? c.export.bind(c) : null;
      const instance = c.ej2Instances?.export ? c.ej2Instances.export.bind(c.ej2Instances) : null;

      (proxied || instance)?.(format, fileName);
    },

    handleExportPNG() { this.doExport('PNG', 'Sankey'); },
    handleExportPDF() { this.doExport('PDF', 'Sankey'); },
    handleExportSVG() { this.doExport('SVG', 'Sankey'); },
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Export with Custom Options

Export the chart with a custom filename and format selection to control output file names and type:

Composition API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleCustomExport" style="margin-bottom: 10px;">
        Export with Custom Options
      </button>

      <EjsSankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @beforeExport="onBeforeExport"
        @exportComplete="onExportComplete"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const sankeyRef = ref(null);

function onBeforeExport(args) {
  args.width = 1600;
  args.height = 900;
}

function onExportComplete(args) {
  console.log("Export completed successfully");
}

function handleCustomExport() {
const c = sankeyRef.value;
  if (!c) return;
  if (typeof c.export === "function") {
    c.export("PNG", "CustomSankey");
  } else if (c.ej2Instances?.export) {
    c.ej2Instances.export("PNG", "CustomSankey");
  } else {
    console.error("export() not found on wrapper or ej2Instances");
  }
}

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container { height: 450px; }
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleCustomExport" style="margin-bottom: 10px;">
        Export with Custom Options
      </button>

      <ejs-sankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @beforeExport="onBeforeExport"
        @exportComplete="onExportComplete"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
    onBeforeExport(args) {
      args.width = 1600;  // customize as needed
      args.height = 900;  // customize as needed
    },
    onExportComplete(args) {
      console.log("Export completed successfully");
    },

    handleCustomExport() {
      
 const c = this.$refs.sankeyRef;
      if (!c) return;
      if (typeof c.export === "function") {
        c.export("PNG", "CustomSankey");
      } else if (c.ej2Instances && typeof c.ej2Instances.export === "function") {
        c.ej2Instances.export("PNG", "CustomSankey");
      } else {
        console.error("export() not found on wrapper or ej2Instances");
      }
    },
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container { height: 450px; }
</style>

Export Events

Before Export Event

Use the beforeExport event to customize the export process before the file is generated. This allows you to modify chart properties, add watermarks, or perform pre-export calculation.

Composition API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleExport" style="margin-bottom: 10px;">
        Export PNG
      </button>

      <EjsSankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @beforeExport="beforeExport"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const sankeyRef = ref(null);

function beforeExport(args) {
  args.cancel = false;
}

function handleExport() {
  if (sankeyRef.value) {
    sankeyRef.value.export("PNG", "Sankey");
  }
}

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleExport" style="margin-bottom: 10px;">
        Export PNG
      </button>

      <ejs-sankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @beforeExport="beforeExport"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
    beforeExport(args) {
      args.cancel = false;
    },
    handleExport() {
      this.$refs.sankeyRef.export("PNG", "Sankey");
    }
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container {
  height: 450px;
}
</style>

Export Completed Event

Handle the completion of export using the exportCompleted event:

Composition API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleExport" style="margin-bottom: 10px;">
        Export PNG
      </button>

      <EjsSankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @exportComplete="onExportComplete"
      >
        <ESankeyNodesCollection>
          <ESankeyNode id="Agricultural Waste" />
          <ESankeyNode id="Biomass Residues" />
          <ESankeyNode id="Bio-conversion" />
          <ESankeyNode id="Liquid Biofuel" />
          <ESankeyNode id="Electricity" />
          <ESankeyNode id="Heat" />
        </ESankeyNodesCollection>

        <ESankeyLinksCollection>
          <ESankeyLink sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <ESankeyLink sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <ESankeyLink sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </ESankeyLinksCollection>

      </EjsSankey>

    </div>
  </div>
</template>

<script setup>
import { ref, provide } from "vue";

import {
  SankeyComponent as EjsSankey,
  SankeyNodesCollectionDirective as ESankeyNodesCollection,
  SankeyNodeDirective as ESankeyNode,
  SankeyLinksCollectionDirective as ESankeyLinksCollection,
  SankeyLinkDirective as ESankeyLink,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

const sankeyRef = ref(null);

function onExportComplete(args) {
  console.log("Export completed successfully");
}

function handleExport() {
  const c = sankeyRef.value;
  if (!c) return;
  if (typeof c.export === "function") {
    c.export("PNG", "Sankey");
  } else if (c.ej2Instances?.export) {
    c.ej2Instances.export("PNG", "Sankey");
  } else {
    console.error("export() not found on wrapper or ej2Instances");
  }
}

provide("sankey", [SankeyTooltip, SankeyLegend, SankeyExport]);
</script>

<style>
#sankey-container { height: 450px; }
</style>

Options API (~/src/App.vue)

<template>
  <div class="control-pane">
    <div class="control-section">

      <button @click="handleExport" style="margin-bottom: 10px;">
        Export PNG
      </button>

      <ejs-sankey
        ref="sankeyRef"
        id="sankey-container"
        width="90%"
        height="450px"
        @exportComplete="onExportComplete"
      >
        <e-sankey-nodes-collection>
          <e-sankey-node id="Agricultural Waste" />
          <e-sankey-node id="Biomass Residues" />
          <e-sankey-node id="Bio-conversion" />
          <e-sankey-node id="Liquid Biofuel" />
          <e-sankey-node id="Electricity" />
          <e-sankey-node id="Heat" />
        </e-sankey-nodes-collection>

        <e-sankey-links-collection>
          <e-sankey-link sourceId="Agricultural Waste" targetId="Bio-conversion" :value="84.152" />
          <e-sankey-link sourceId="Biomass Residues" targetId="Bio-conversion" :value="24.152" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Liquid Biofuel" :value="10.597" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Electricity" :value="36.862" />
          <e-sankey-link sourceId="Bio-conversion" targetId="Heat" :value="60.845" />
        </e-sankey-links-collection>

      </ejs-sankey>

    </div>
  </div>
</template>

<script>
import {
  SankeyComponent,
  SankeyNodesCollectionDirective,
  SankeyNodeDirective,
  SankeyLinksCollectionDirective,
  SankeyLinkDirective,
  SankeyTooltip,
  SankeyLegend,
  SankeyExport
} from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",

  methods: {
    onExportComplete(args) {
      console.log("Export completed successfully");
    },
    handleExport() {
      const c = this.$refs.sankeyRef;
      if (!c) return;
      if (typeof c.export === "function") {
        c.export("PNG", "Sankey");
      } else if (c.ej2Instances && typeof c.ej2Instances.export === "function") {
        c.ej2Instances.export("PNG", "Sankey");
      } else {
        console.error("export() not found on wrapper or ej2Instances");
      }
    },
  },

  components: {
    "ejs-sankey": SankeyComponent,
    "e-sankey-nodes-collection": SankeyNodesCollectionDirective,
    "e-sankey-node": SankeyNodeDirective,
    "e-sankey-links-collection": SankeyLinksCollectionDirective,
    "e-sankey-link": SankeyLinkDirective
  },

  provide: {
    sankey: [SankeyTooltip, SankeyLegend, SankeyExport]
  }
};
</script>

<style>
#sankey-container { height: 450px; }
</style>

Export Format Comparison

Format	Use Case	Quality	File Size
PNG	Web sharing, presentations	Raster (good quality)	Medium
JPEG	Web images, email	Raster (good quality)	Small
SVG	Scalable graphics, printing	Vector (scalable)	Medium
PDF	Documents, archival	Vector (scalable)	Medium

Best Practices

• PNG/JPEG: Best for quick sharing and web usage
• SVG: Best for scalable, print-ready exports
• PDF: Best for formal documents and archival purposes
• Choose format based on your distribution and usage requirements
• Test exports in different formats to ensure quality meets your needs