Print and Export in React Sankey Chart component

13 Mar 202624 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:

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance = null;

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handlePrint} style={{ marginBottom: '10px' }}>
          Print
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance: SankeyComponent | null = null;

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handlePrint} style={{ marginBottom: '10px' }}>
          Print
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
            <SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

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

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance = null;

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

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

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExportPNG} style={{ marginRight: '5px' }}>
          Export PNG
        </button>
        <button onClick={handleExportPDF} style={{ marginRight: '5px' }}>
          Export PDF
        </button>
        <button onClick={handleExportSVG} style={{ marginBottom: '10px' }}>
          Export SVG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance: SankeyComponent | null = null;

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

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

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExportPNG} style={{ marginRight: '5px' }}>
          Export PNG
        </button>
        <button onClick={handleExportPDF} style={{ marginRight: '5px' }}>
          Export PDF
        </button>
        <button onClick={handleExportSVG} style={{ marginBottom: '10px' }}>
          Export SVG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
            <SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

Export with Custom Options

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

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance = null;

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleCustomExport} style=>
          Export with Custom Options
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance: SankeyComponent | null = null;

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleCustomExport} style=>
          Export with Custom Options
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
            <SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

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:

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance = null;

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

  const handleExport = () => {

    if (sankeyInstance) {
      sankeyInstance.print();
    }
  };

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExport} style=>
          Export PNG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
          beforeExport={beforeExport}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective,
  SankeyExportEventArgs
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance: SankeyComponent | null = null;

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

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExport} style=>
          Export PNG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
          beforeExport={beforeExport}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

Export Completed Event

Handle the completion of export using the exportCompleted event:

app.jsx
app.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance = null;

  const exportComplete = (args) => {
    console.log('Export completed successfully');
  };

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExport} style=>
          Export PNG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
          exportComplete={exportComplete}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
<SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
              <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  SankeyComponent, Inject, SankeyTooltip, SankeyLegend, SankeyExport,
  SankeyNodeDirective,
  SankeyNodesCollectionDirective,
  SankeyLinkDirective,
  SankeyLinksCollectionDirective,
  SankeyExportEventArgs
} from '@syncfusion/ej2-react-charts';

function App() {
  let sankeyInstance: SankeyComponent | null = null;

  const exportComplete = (args: SankeyExportEventArgs) => {
    console.log('Export completed successfully');
  };

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

  return (
    <div className="control-pane">
      <div className="control-section">
        <button onClick={handleExport} style=>
          Export PNG
        </button>
        <SankeyComponent
          ref={(sankey) => (sankeyInstance = sankey)}
          id="sankey-container"
          width="90%"
          height="450px"
          exportComplete={exportComplete}
        >
          <SankeyNodesCollectionDirective>
            <SankeyNodeDirective id="Agricultural Waste" />
            <SankeyNodeDirective id="Biomass Residues" />
            <SankeyNodeDirective id="Bio-conversion" />
            <SankeyNodeDirective id="Liquid Biofuel" />
            <SankeyNodeDirective id="Electricity" />
            <SankeyNodeDirective id="Heat" />
          </SankeyNodesCollectionDirective>
          <SankeyLinksCollectionDirective>
            <SankeyLinkDirective sourceId="Agricultural Waste" targetId="Bio-conversion" value={84.152} />
            <SankeyLinkDirective sourceId="Biomass Residues" targetId="Bio-conversion" value={24.152} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Liquid Biofuel" value={10.597} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Electricity" value={36.862} />
            <SankeyLinkDirective sourceId="Bio-conversion" targetId="Heat" value={60.845} />
          </SankeyLinksCollectionDirective>
          <Inject services={[SankeyTooltip, SankeyLegend, SankeyExport]} />
        </SankeyComponent>
      </div>
    </div>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('sankey'));

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

Search docs

Ask Syncfusion AI Assistant