Use CSS classes to color-code nodes by department, role, or any other criteria.
Set the className property on each node to apply custom styling.
Source
<style type="text/css">
.orgchart .gold-level .title { background-color: #DAA520; }
.orgchart .gold-level .content { border-color: #DAA520; }
.orgchart .green-level .title { background-color: #228B22; }
.orgchart .green-level .content { border-color: #228B22; }
.orgchart .blue-level .title { background-color: #4169E1; }
.orgchart .blue-level .content { border-color: #4169E1; }
.orgchart .red-level .title { background-color: #DC143C; }
.orgchart .red-level .content { border-color: #DC143C; }
.orgchart .purple-level .title { background-color: #8B008B; }
.orgchart .purple-level .content { border-color: #8B008B; }
</style>
<pe:orgchart id="orgChart"
widgetVar="colorWidget"
value="#{colorCodedOrgchartController.colorCodedChart}"
nodeId="id"
nodeContent="title"
nodeTitle="name"
style="height:400px">
</pe:orgchart>
@Named("colorCodedOrgchartController")
@ViewScoped
public class ColorCodedOrgchartController implements Serializable {
private static final long serialVersionUID = 1648477595853984820L;
public OrgChartNode getColorCodedChart() {
DefaultOrgChartNode root = new DefaultOrgChartNode("1", "Leadership", "Executive Team");
root.setClassName("gold-level");
DefaultOrgChartNode mgmt = new DefaultOrgChartNode("2", "Management", "Middle Management");
mgmt.setClassName("green-level");
DefaultOrgChartNode staff1 = new DefaultOrgChartNode("3", "Engineering", "Tech Staff");
staff1.setClassName("blue-level");
DefaultOrgChartNode staff2 = new DefaultOrgChartNode("4", "Sales", "Sales Staff");
staff2.setClassName("red-level");
DefaultOrgChartNode staff3 = new DefaultOrgChartNode("5", "Support", "Support Staff");
staff3.setClassName("purple-level");
mgmt.addChild(staff1);
mgmt.addChild(staff2);
mgmt.addChild(staff3);
root.addChild(mgmt);
return root;
}
}