Orgchart layout options, didplay images with just a circular picture


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


Hi @Garrett,

Nice picture :slight_smile:

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

I prepared an example for you:

  background: #ffffff;  /*changing backgroung color*/
.pl-item-photo img{
 border-radius: 40px; /*making pictures round*/
 height: 65px;
 width: 65px;
 max-width: 65px
  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


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