Custom code

Custom CSS

Org Chart allows to specify custom CSS styles. If you are familiar with CSS, you can adjust visualization of company structure to your brand book.

On the picture below you can see example of CSS style which changes the background of boxes to black: {
  background-color: black !important;
  border-color: black !important;

Custom CSS

And this is another example which resizes Org Chart boxes to smaller size. Thus, more boxes can be displayed in the single screen.

/*Width of the box*/
.poch-application-container .poch-group-item  {
  width: 170px;

/*Font size for the fields in the box*/
.poch-application-container .poch-box__field {
  font-size: 12px;

/*Font size for the header field in the box (the first in the box)*/
.poch-application-container .poch-box__field.poch-box__header {
  font-size: 12px;

/*Width of the photo in the box*/
.poch-application-container .poch-box {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;

Review more articles on customizing Org Chart look:



Editing JavaScript is available only for Tenant Administrator (Global Admininistrator).

This step allows to specify custom JavaScript code. You can use functions from JavaScript framework to subscribe for box, tooltip, search results rendering events. Each event receives rendered element and object with field values from the data source. The object contains all fields from the data source. Find their names by clicking the Field names button. Read description of JavaScript framework for more information.

On the picture below you can see an example of JavaScript which changes the background of boxes to red for all employees from the Marketing Department.

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    if (itemData["Department"].contains("Marketing")) {
        const $boxCard = $(box.elem).find(".poch-group-item__card");
            'background-color': 'red',
            'border-color': 'red'

Custom JavaScript


Go to the next step of the configuration wizard: General.