Orgchart layout options, didplay images with just a circular picture


#1

How would i go about getting the orgchart to display like the picture below.


#2

Hi @Garrett,

Nice picture :slight_smile:

You can style a chart in a similar way using Custom JS.

I prepared an example for you:

.poch-content{
  background: #ffffff;  /*changing backgroung color*/
}
.pl-item-photo img{
 border-radius: 40px; /*making pictures round*/
 height: 65px;
 width: 65px;
 max-width: 65px
}
.pl-item-card>.pl-item-photo{
  max-width: 65px !important
}
html .RadOrgChart .rocItemTemplate{
  left: 66px; /*moving boxes to the right*/
  position: relative;
  margin-top: -15px;
  border-color: transparent; /*making the border of the boxes invisible*/
  background-color: transparent; /*making the backgound of the boxes invisible*/
  padding-left: 5px;
}
html .RadOrgChart .rocItemTemplate:hover{
  border-color: #4891a3;
  background-color: #4891a3; /*changing boxes color on hover*/
}
html .RadOrgChart .detailsTooltipLink{
  color: #ffffff !important;
}
.pl-item-card .pl-item-fields{
  color: #ffffff !important;
}

You will get something like this:

You may also play with the width of the boxes to move them closer to each other. I would make the outer div smaller, specify a particular width for the inner div, and use overflow: visible property, so that the boxes look the same way but take less space in the chart.

Best Regards,
Anna Dorokhova
Plumsail Team


#3

perfect. Will need to customize but this gets me where i need to be.