Export Options
The KendoReact Sankey diagram allows you to export its contents as an Image, SVG, or PDF file.
Regardless of the required export format, you can use the exportVisual method to export the visuals of the Sankey component. The component exports the visuals as an Image, SVG, or PDF by using the Drawing library and saves them using the saveAs method.
Export to Image
Export the Sankey visual as an Image by using the exportImage method and save it using the saveAs method.
By default, the exported image is of the same size as the Sankey DOM element. If required, you can export the file to a different resolution. If you change the image size, the image quality will not be affected because the rendering of the Sankey chart is based on vector graphics.
Export to SVG
Export the Sankey visual as an SVG by using the exportSVG method and save it using the saveAs method.
Export to PDF
Export the Sankey visual as a PDF by using the exportPDF method and save it using the saveAs method.
Fitting to Paper Size
If the rendered Sankey Diagram is bigger than the exported PDF paper size, then the chart is clipped. To avoid this behavior, either:
- Set the
exportVisualsize, or - Scale the drawing element, which is returned by the
exportVisualmethod.
Customize the Export
You can customize the export using the exportVisual method. The following options are available:
-
width—Set the width of the exported visual. -
height—Set the height of the exported visual. -
options—Sankey options to be used for the exported visual.
<div id="sankey" style="width: 500px; height: 200px;"></div>
<script>
$("#sankey").kendoSankey({
data: {
nodes: [
{ id: 1, label: { text: "Node 1" } },
{ id: 2, label: { text: "Node 2" } },
{ id: 3, label: { text: "Node 3" } }
],
links: [
{ sourceId: 1, targetId: 3, value: 2 },
{ sourceId: 2, targetId: 3, value: 1 }
]
}
});
var sankey = $("#sankey").getKendoSankey();
var visual = sankey.exportVisual({ width: 800, height: 600 });
console.log(visual);
</script>