How to change the color of the box for different region

Hi I need some help on the CSS script to change my org chart based on region. We have 4 different regions and we are using Office 365 Org Chart based on user profile and not sharepoint list. The field that we specify the region is Office (Office). I need to change the color of the box as follows:
If office contains “Asia Pacific, Head Office”, then Blue
If Office contains “EMEA” then Green
If Office contains “America” then Grey
If Office contains “Japan” then White

Can someone help to provide the syntax for this and where should it be paste into?

Many thanks
Diana

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

Hi Diana,
Thank you for your message.

You may use the OnBoxRender event on "Custom JavaScript" step of the configuration wizard.

For example, you could try this code snippet for your task:

renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Office"].contains("Asia Pacific, Head Office"))
  {
    box.$elem.css({
      'background-color': 'blue',
      'border-color': 'blue'
    });
  }
  else if(itemData["Office"].contains("EMEA"))
  {
    box.$elem.css({
      'background-color': 'green',
      'border-color': 'green'
    });
  }
    else if(itemData["Office"].contains("America"))
  {
    box.$elem.css({
      'background-color': 'grey',
      'border-color': 'grey'
    });
  } 
    else if(itemData["Office"].contains("Japan"))
  {
    box.$elem.css({
      'background-color': 'white',
      'border-color': 'white'
    });
  } 
});

Best regards
Evgeniy Kovalev
Plumsail Team

Thanks so much for that as it works. Is there a way to add a legend to explain the color coding on the org chart?

Org Chart uses the standard CSS color codes.
You could look at this link:
http://www.w3schools.com/cssref/css_colors.asp
There is a table of color names that are supported by all browsers.

Best regards
Evgeniy Kovalev
Plumsail Team

Sorry I meant that can I add a legend on the org page that explains green is our EMEA office, blue is our head office etc…Can I add a custom CSS script for that and if so, can you help to provide the codes?

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

You could try to use this solution for your task:
Add this code snippet in "Custom JavaScript" step of the configuration master, after event handlers:

$(".poch-main-container").append( "<table class='colorLegend'>"+ "<tr><td><div class='colorBox' style='background-color: blue;'/></td><td width='5px'></td><td>Asia Pacific, Head Office</td></tr>"+ "<tr><td><div class='colorBox' style='background-color: green;'/></td><td width='5px'></td><td>EMEA</td></tr>"+ "<tr><td><div class='colorBox' style='background-color: gray;'/></td><td width='5px'></td><td>America</td></tr>"+ "<tr><td><div class='colorBox' style='background-color: white;'/></td><td width='5px'></td><td>Japan</td></tr>"+ "</table>" );
And this snippet in "Custom CSS" step of the configuration master:

.colorLegend {
  position: absolute;
  left: 20px;
  top: 40px;
}

table.colorLegend td {
  height: 17px;
  font-size: 10px;
}

.colorBox {
  width: 20px;
  height: 15px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

Best regards
Evgeniy Kovalev
Plumsail Team

Thank you so much for this. It worked!

Update for Org Chart 4.

The JavaScript snippet:

api.onBoxRendered((box, itemData) => {
  if (itemData["Office"].contains("Asia Pacific, Head Office")) {
    $(box.elem).find(".poch-group-item__card").css({
      "background-color": "blue",
      "border-color": "blue"
    });
  } else if (itemData["Office"].contains("EMEA")) {
    $(box.elem).find(".poch-group-item__card").css({
      "background-color": "green",
      "border-color": "green"
    });
  } else if (itemData["Office"].contains("America")) {
    $(box.elem).find(".poch-group-item__card").css({
      "background-color": "grey",
      "border-color": "grey"
    });
  } else if (itemData["Office"].contains("Japan")) {
    $(box.elem).find(".poch-group-item__card").css({
      "background-color": "white",
      "border-color": "white"
    });
  }
});

let legend = false;

api.onInitialLoadingFinished(() => {
  if (!legend) {
    legend = true;
    $(".poch-web-part__main-container").append("<table class='colorLegend'>" + "<tr><td><div class='colorBox' style='background-color: blue;'/></td><td width='5px'></td><td>Asia Pacific, Head Office</td></tr>" + "<tr><td><div class='colorBox' style='background-color: green;'/></td><td width='5px'></td><td>EMEA</td></tr>" + "<tr><td><div class='colorBox' style='background-color: gray;'/></td><td width='5px'></td><td>America</td></tr>" + "<tr><td><div class='colorBox' style='background-color: white;'/></td><td width='5px'></td><td>Japan</td></tr>" + "</table>");
  }
});

The CSS snippet:

.colorLegend {
  position: absolute;
  left: 20px;
  top: 50px;
}

table.colorLegend td {
  height: 17px;
  font-size: 10px;
}

.colorBox {
  width: 20px;
  height: 15px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}