BALKAN OrgChart React - React Org Chart Library | Docs

PNG/SVG Export ​

You can replace PNG with SVG in all examples.

Use the predefined menu or nodeMenu item to add export:

javascript
menu={{ png_export: { text: "Export PNG" } }}

PNG Export Example

Export options ​

javascript
chart.exportToPNG({
  childLevels: 1,
  parentLevels: 1,
  expandChildren: true,
  fileName: "myChart.PNG",
  header: '<text>My SVG Header</text>',
  footer: '<text>My SVG Footer. Slide {current-page} of {total-pages}</text>',
  min: false,
  openInNewTab: true,
  margin: [10, 10, 10, 10],
  padding: 50
});

Not all options can work together.

The header and footer are SVG definitions.

First define the function:

javascript
function png() {
  chartRef.current?.exportToPNG({
      header: '<text style="font-size:36px;">My Header</text>',
      footer: '<text style="font-size:24px;">My Footer. Page {current-page} of {total-pages}</text>',
  });
}

Then use it in a menu option:

javascript
menu={{
    export_png: {
        text: "Export to PNG with my header and footer",
        icon: OrgChartJS.icon.png(24, 24, "#7A7A7A"),
        onClick: png
    },
}}

PNG Export With Header and Footer Example

Export by pages ​

You can export multiple charts or export a chart by teams using the pages property.

You can use the following options:

javascript
  chartRef.current?.exportToPNG({
      pages: [
        {
          content: '<svg><text>My Header</text></svg>',
          chartInstance: chart,
          nodeId: 2,
          expandChildren: true,
          childLevels: 2,
          parentLevels: 1,
          min: false,
          header: '<text>My Header</text>',
          footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
        }
      ]
  });

Export a chart by teams ​

javascript
chartRef.current?.exportToPNG({
    expandChildren: false,
    pages: [
        {
            nodeId: 2
        },
        {
            nodeId: 3,
            childLevels: 1
        },
        {
            nodeId: 4
        },
    ]
});

PNG Export a chart by teams

Export multiple charts in one PNG file ​

javascript
chart1Ref.current?.exportToPNG({
    pages: [
      { chartInstance: chart1Ref.current || undefined, header: '<text>OrgChart 1</text>' },
      { chartInstance: chart2Ref.current || undefined, header: '<text>OrgChart 2</text>' },
      { chartInstance: chart3Ref.current || undefined, header: '<text>OrgChart 3</text>' },
      { chartInstance: chart4Ref.current || undefined, header: '<text>OrgChart 4</text>' }
    ]
});

PNG Export multiple Charts

Exporting styles ​

Using the onExportStart and onExportEnd event listeners, you can change the export behavior. You can export styles using the args.styles property.

HTML:

html
<style id="myStyles">
  @import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

  .node {
    font-family: "Gochi Hand";
  }

  .node.HR rect {
    fill: #E99113;
  }
</style>

JavaScript:

javascript
const exportStyles = document.getElementById("myStyles")?.outerHTML || "";
javascript
onExportStart={(args) => { args.styles += exportStyles; }}

PNG Export Styles Demo

PNG Preview ​

You can add PNG/SVG Preview as a menu item:

javascript
 menu={{ png_preview: { text: "PNG Preview" } }}

And/or as a nodeMenu option:

javascript
nodeMenu={{ png_preview: { text: "PNG Preview" } }}

Click on the menu option to open the preview:

PNG Preview

The header and footer are SVG definitions.

Define the function:

javascript
  function pngPreview() {
    chartRef.current?.pngPreviewUI.show({
      header: '<text>My Header</text>',
      footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    });
  }

Use it in a menu option:

javascript
menu={{ 
    pngPreview: {
      text: "PNG Preview with Header and Footer",
      icon: OrgChartJS.icon.png(24, 24, "#7A7A7A"),
      onClick: pngPreview
    } 
}}

PNG Preview with Header and Footer

Add pages programmatically ​

You can add custom pages in preview using the pages property.

Here is how to export a chart by teams:

javascript
function pngPreview() {
  chartRef.current?.pngPreviewUI.show({
    pages: [
      {
        nodeId: 2
      },
      {
        nodeId: 3,
        childLevels: 1
      },
      {
        nodeId: 4
      },
    ]
  });
}

PNG Preview add pages Programmatically

Custom content pages ​

You can add a page with custom content:

javascript
function pngExportPreview() {
  chartRef.current?.pngPreviewUI.show({
    pages: [
      {
        content: '<svg>[Your SVG definition here]</svg>'
        // or
        // content: '[Your HTML definition here]'
      },
      {
        nodeId: 2
      }
    ]
  });
}

Here is how to add a page with a logo:

PNG Preview add custom content

Preview Buttons Configuration ​

You can hide or show the following buttons:

javascript
chartRef.current?.pngPreviewUI.buttons.addNewPage = true;
chartRef.current?.pngPreviewUI.buttons.childLevels = true;
chartRef.current?.pngPreviewUI.buttons.parentLevels = true;
chartRef.current?.pngPreviewUI.buttons.removePage = true;

Here is an example:

PNG Preview buttons configuration

Localization ​

Here is what you can localize in PNG/SVG Preview:

javascript
chartRef.current?.pngPreviewUI.locExport = 'Export';
chartRef.current?.pngPreviewUI.locCancel = 'Close';
chartRef.current?.pngPreviewUI.locParentLevels = 'parent levels';
chartRef.current?.pngPreviewUI.locChildLevels = 'child levels';
chartRef.current?.pngPreviewUI.locClickToAdd = 'Click on a node to display it here';
chartRef.current?.pngPreviewUI.locAddNew = 'Add new PNG';
chartRef.current?.pngPreviewUI.locRemove = 'Remove PNG';

Here is an example:

PNG Preview localization

Images ​

Sometimes you may need to convert images to base64 before exporting. Use this constant:

javascript
OrgChart.CONVERT_IMAGES_TO_BASE64_BEFORE_EXPORT = true;

Server JS

There may be cases where you do not want to use the BALKAN server for export. For example, if you run a secure website or do not want your data to be passed to https://balkan.app.

In that case you need to set up your own Server JS.