Organisation Chart Department Title



As a suggested new feature could you please look at including a parameter that allows users to select a title for the Organisation Chart that will also be included in the print to image and pdf functions.



Hi @sangel,

Thank you for your feedback.

You can add print headers right now with a bit of JavaScript and CSS. I will show how to do this.

Just open the configuration wizard and navigate to ‘Custom JavaScript’ step. Paste this code:

var printHeader = "Marketing department";

  var $printHeader = renderer.domQueryHelper.querySelector(".poch-print-header");
  var printHeaderFound = $printHeader.length !== 0;
    var $nodeList = renderer.domQueryHelper.getRootNodeList();	
    $nodeList.prepend("<div class='poch-print-header'>" + printHeader +"</div>");

This code adds print header to root node of Org Chart. you can replace text in the first line with your own text:

var printHeader = "Marketing department";

Then navigate to ‘Custom CSS’ step and paste this CSS code:

.poch-print-header {  
  display: none;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  padding-bottom: 18px;

.pl-print-mode .poch-print-header {
  display: block;

This code sets font size and padding for the header and shows it only while printing. You can find more information about applying CSS only to printing read this article.


But would there be a way to make this more dynamic, for instance, if I am printing the Org one one person, that print header would be different than another.


Hi @turtlgal,

Sure, you can set header dynamically in JavaScript code. Just set this variable according to your needs:

var printHeader = "Marketing department";

What information do you want to display in header?