PNG/SVG Export

You can replace PNG with SVG in all examples.

Use the predefined menu or nodeMenu item to add export:

nodeMenu: {
  png_export: { text: "Export PNG" }
},

Here is the result:

Edit in BALKAN Code

Or you can use the exportToPNG method.

Export options

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.

Add header and footer

The header and footer are SVG definitions.

Define the function:

function png(nodeId) {
  chart.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>',
  });
}

Use it in a menu option:

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

Edit in BALKAN Code

Export by pages

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

You can use the following options:

chart.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

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

Edit in BALKAN Code

Export multiple charts in one PNG file

chart1.exportToPNG({
  pages: [
    { chartInstance: chart1, header: '<text>OrgChart 1</text>' },
    { chartInstance: chart2, header: '<text>OrgChart 2</text>' },
    { chartInstance: chart3, header: '<text>OrgChart 3</text>' },
    { chartInstance: chart4, header: '<text>OrgChart 4</text>' }
  ]
});

Edit in BALKAN Code

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:

<style id="myStyles">
  .node.HR rect {
    fill: #E99113;
  }
</style>

JavaScript:

// add before chart.load()
chart.onExportStart((args) => {
  args.styles += document.getElementById('myStyles').outerHTML;
});

Code example:

Edit in BALKAN Code

All examples are created for PNG, but they work the same way for SVG too.

PNG Preview

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

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

And/or as a nodeMenu option:

nodeMenu: {
  png_preview: { text: "PNG Preview from here" }
}

Click on the menu option to open the preview:

Edit in BALKAN Code

Add header and footer to preview

The header and footer are SVG definitions.

Define the function:

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

Use it in a menu option:

menu: {
  pngPreview: {
    text: "Export PNG",
    icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
    onClick: pngPreview
  }
}

Edit in BALKAN Code

Add pages programmatically

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

Here is how to export a chart by teams:

function pngExportPreview() {
  chart.pngPreviewUI.show({
    pages: [
      {
        nodeId: 2
      },
      {
        nodeId: 3,
        childLevels: 1
      },
      {
        nodeId: 4
      },
    ]
  });
}

Edit in BALKAN Code

Custom content pages

You can add a page with custom content:

function pngExportPreview() {
  chart.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:

Edit in BALKAN Code

Preview Buttons Configuration

You can hide or show the following buttons:

chart.pngPreviewUI.buttons.addNewPage = true;
chart.pngPreviewUI.buttons.childLevels = true;
chart.pngPreviewUI.buttons.parentLevels = true;
chart.pngPreviewUI.buttons.removePage = true;

Here is an example:

Edit in BALKAN Code

Localization

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

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

Here is an example:

Edit in BALKAN Code

Images

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

OrgChart.CONVERT_IMAGES_TO_BASE64_BEFORE_EXPORT = true;

Code example: convert images

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.

API Removal Notice (Version 9)

The following methods were removed in version 9. Update your implementation to use the new alternatives below.

Removed	Use Instead
exportPNG	exportToPNG
exportSVG	exportToSVG
exportPNGProfile	exportToPNG with pages and isProfile: true option