BALKAN OrgChart JS - JavaScript Org Chart Library | Docs

Add CSS on Export ​

Code iconEdit in BALKAN Code

When exporting a chart with OrgChart JS, you may want custom styles such as fonts, colors, and shape accents to appear in the exported PDF.

By default, exported output may not include CSS rules that are defined only in your page. This guide shows how to include those styles during export.

The Problem ​

OrgChart can export charts as PDFs, but custom CSS is not always bundled automatically.

If you use custom tag styles or fonts, the exported file can look different from what users see on screen.

The Solution: Use exportstart ​

Hook into the exportstart event and append your stylesheet markup to args.styles.

javascript
chart.on('exportstart', function (sender, args) {
  args.styles += document.getElementById('myStyles').outerHTML;
});

This adds the <style> block with ID myStyles to the exported document, so your custom visual rules are preserved.

Full Example ​

Custom Styles ​

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

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

  .node.HR line {
    stroke: #E99113;
  }
</style>

Export Hook ​

javascript
chart.on('exportstart', function (sender, args) {
  args.styles += document.getElementById('myStyles').outerHTML;
});

Result ​

Now when users export with the default PDF menu or with your own export button, the output keeps the same styling as the interactive chart.

That includes custom fonts, tag-based colors, and other style overrides.