Change color for specific box

Hello, I want to change the background color of an specific level of my org chart but I only can change the background color of all boxes.
How can I do this?

Thanks,
Cristina

This is a solution for Org Chart 3. Check the reply for Org Chart 4 below.

Hello @Cristina,

Unfortunately, it's not possible to change a color of the boxes on a specific level, but you can change the color of boxes of specific users. Thus, you can get the result you are looking for by coloring the boxes of all the user on a specific level. To change the background color conditionally please add a script like this in the Custom JavaScript tab:

renderer.onBoxRendered(function(event, box, itemData){
  if (itemData["AccountName"].contains("account1@yourdomain.onmicrosoft.com") || itemData["AccountName"].contains("account2@yourdomain.onmicrosoft.com")){
    box.$elem.addClass("custom-class").css({'background': 'yellow'});
  }
});

Anna Dorokhova
Plumsail Team

Update for Org Chart 4.

It is possible to customize styles for a certain level of the chart. For that, it is necessary to enable displaying the level number:

Then add the code snippet below on the Custom JavaScript step (note: the code is for the Modern skin, for others you may need to modify the jQuery selector):

api.onBoxRendered((box, itemData) => {
    //Box rendered event
    //Check if the level number of the current box is equal to 2 and...
    if (itemData.pochContext.boxLevelNumber == 2) {
        //...find the element by a class and assign a custom one with jQuery
        $(box.elem).find(".poch-group-item__card").addClass("level-2");
    }
});

On the Custom CSS step, set custom styles for the custom class assigned above.

.level-2 {
  background-color: green !important;
}

The result if the following:

image