Print and Export in TypeScript Sankey Chart component

18 Nov 201821 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:

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

let sankeyRef: Sankey | null = null;

const handlePrint = () => {
  if (sankeyRef) {
    sankeyRef.print();
  }
};

const nodes: SankeyNodeModel[] = [
  { id: 'Agricultural Waste' },
  { id: 'Biomass Residues' },
  { id: 'Bio-conversion' },
  { id: 'Liquid Biofuel' },
  { id: 'Electricity' },
  { id: 'Heat' }
];

const links: SankeyLinkModel[] = [
  { sourceId: 'Agricultural Waste', targetId: 'Bio-conversion', value: 84.152 },
  { sourceId: 'Biomass Residues', targetId: 'Bio-conversion', value: 24.152 },
  { sourceId: 'Bio-conversion', targetId: 'Liquid Biofuel', value: 10.597 },
  { sourceId: 'Bio-conversion', targetId: 'Electricity', value: 36.862 },
  { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
];

(document.getElementById('print-btn') as HTMLElement).addEventListener('click', handlePrint);

const sankey: Sankey = new Sankey(
  {
     width:  '90%',
    height: '450px',
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);

sankeyRef = sankey;
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
                <button id="print-btn">
                    Print
                </button>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

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 the chart using default settings with a default filename:

Export with Default Settings

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

let sankeyRef: Sankey | null = null;

const handleExportPNG = () => {
  if (sankeyRef) {
    sankeyRef.export('PNG', 'Sankey');
  }
};

const handleExportPDF = () => {
  if (sankeyRef) {
    sankeyRef.export('PDF', 'Sankey');
  }
};

const handleExportSVG = () => {
  if (sankeyRef) {
    sankeyRef.export('SVG', 'Sankey');
  }
};

const nodes: SankeyNodeModel[] = [
  { id: 'Agricultural Waste' },
  { id: 'Biomass Residues' },
  { id: 'Bio-conversion' },
  { id: 'Liquid Biofuel' },
  { id: 'Electricity' },
  { id: 'Heat' }
];

const links: SankeyLinkModel[] = [
  { sourceId: 'Agricultural Waste', targetId: 'Bio-conversion', value: 84.152 },
  { sourceId: 'Biomass Residues', targetId: 'Bio-conversion', value: 24.152 },
  { sourceId: 'Bio-conversion', targetId: 'Liquid Biofuel', value: 10.597 },
  { sourceId: 'Bio-conversion', targetId: 'Electricity', value: 36.862 },
  { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
];

(document.getElementById('export-png') as HTMLElement).addEventListener('click', handleExportPNG);
(document.getElementById('export-pdf')  as HTMLElement).addEventListener('click', handleExportPDF);
(document.getElementById('export-svg')  as HTMLElement).addEventListener('click', handleExportSVG);

const sankey: Sankey = new Sankey(
  {
    width:  '90%',
    height: '450px',
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);

sankeyRef = sankey;
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
                <button id="export-png">
                    Export PNG
                </button>
                <button id="export-pdf">
                    Export PDF
                </button>
                <button id="export-svg">
                    Export SVG
                </button>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

Export with Custom Options

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

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

let sankeyRef: Sankey | null = null;

const handleCustomExport = () => {
  if (sankeyRef) {
    sankeyRef.export('PNG', 'CustomSankey');
  }
};

const nodes: SankeyNodeModel[] = [
  { id: 'Agricultural Waste' },
  { id: 'Biomass Residues' },
  { id: 'Bio-conversion' },
  { id: 'Liquid Biofuel' },
  { id: 'Electricity' },
  { id: 'Heat' }
];

const links: SankeyLinkModel[] = [
  { sourceId: 'Agricultural Waste', targetId: 'Bio-conversion', value: 84.152 },
  { sourceId: 'Biomass Residues', targetId: 'Bio-conversion', value: 24.152 },
  { sourceId: 'Bio-conversion', targetId: 'Liquid Biofuel', value: 10.597 },
  { sourceId: 'Bio-conversion', targetId: 'Electricity', value: 36.862 },
  { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
];

(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleCustomExport);

const sankey: Sankey = new Sankey(
  {
    width:  '90%',
    height: '450px',
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);

sankeyRef = sankey;
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
            <button id="export-btn">
                Export with Custom Options
            </button>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

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

Use the beforeExport event to customize the export process:

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport, SankeyExportEventArgs } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

let sankeyRef: Sankey | null = null;

const beforeExport = (args: SankeyExportEventArgs) => {
  args.cancel = false;
};

const handleExport = () => {
  if (sankeyRef) {
    sankeyRef.export('PNG', 'Sankey');
  }
};

const nodes: SankeyNodeModel[] = [
  { id: 'Agricultural Waste' },
  { id: 'Biomass Residues' },
  { id: 'Bio-conversion' },
  { id: 'Liquid Biofuel' },
  { id: 'Electricity' },
  { id: 'Heat' }
];

const links: SankeyLinkModel[] = [
  { sourceId: 'Agricultural Waste', targetId: 'Bio-conversion', value: 84.152 },
  { sourceId: 'Biomass Residues', targetId: 'Bio-conversion', value: 24.152 },
  { sourceId: 'Bio-conversion', targetId: 'Liquid Biofuel', value: 10.597 },
  { sourceId: 'Bio-conversion', targetId: 'Electricity', value: 36.862 },
  { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
];

(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleExport);

const sankey: Sankey = new Sankey(
  {
     width:  '90%',
    height: '450px',
    beforeExport: beforeExport,
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);

sankeyRef = sankey;
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
                <button id="export-btn">
                    Export PNG
                </button>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

Export Completed Event

Handle the completion of export using the exportCompleted event:

import { Sankey, SankeyNodeModel, SankeyLinkModel, SankeyTooltip, SankeyLegend, SankeyExport, SankeyExportedEventArgs } from '@syncfusion/ej2-charts';

Sankey.Inject(SankeyTooltip, SankeyLegend, SankeyExport);

let sankeyRef: Sankey | null = null;

const exportComplete = (args: SankeyExportedEventArgs) => {
  console.log('Export completed successfully');
  console.log('File name:', args.dataUrl);
};

const handleExport = () => {
  if (sankeyRef) {
    sankeyRef.export('PNG', 'Sankey');
  }
};

const nodes: SankeyNodeModel[] = [
  { id: 'Agricultural Waste' },
  { id: 'Biomass Residues' },
  { id: 'Bio-conversion' },
  { id: 'Liquid Biofuel' },
  { id: 'Electricity' },
  { id: 'Heat' }
];

const links: SankeyLinkModel[] = [
  { sourceId: 'Agricultural Waste', targetId: 'Bio-conversion', value: 84.152 },
  { sourceId: 'Biomass Residues', targetId: 'Bio-conversion', value: 24.152 },
  { sourceId: 'Bio-conversion', targetId: 'Liquid Biofuel', value: 10.597 },
  { sourceId: 'Bio-conversion', targetId: 'Electricity', value: 36.862 },
  { sourceId: 'Bio-conversion', targetId: 'Heat', value: 60.845 }
];

(document.getElementById('export-btn') as HTMLElement).addEventListener('click', handleExport);

const sankey: Sankey = new Sankey(
  {
     width:  '90%',
    height: '450px',
    exportCompleted: exportComplete,
    nodes: nodes,
    links: links,
    tooltip: { enable: true },
    legendSettings: { visible: true }
  },
  '#sankey-container'
);

sankeyRef = sankey;
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
                <button id="export-btn">
                    Export PNG
                </button>
        <div id='sankey-container'></div>
    </div>
</body>

</html>

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