Orgchart layout options, didplay images with just a circular picture

[Garrett]

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

[Anna]

Hi @Garrett,

Nice picture

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

[Garrett]

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

[Garrett]

A quick note on this. I would like to move the drill up buttons over the picture. drill up arrow over the box as it seems to be misaligned too far to the left. also can the drill-down button be changed to text to say browse here? or browse from here?

[Evgeniy]

Hello, @Garrett

To customise styles, I would recommend you to follow these steps:

1. Direct a cursor at the drill buttons and open context menu, click "Inspect Element"
   

2. Find the closest <div> element to the current one:
   

   

3. Check its styles and find those you need. You can modify them to see how they affect the button place:
   

   

4. Use the following styles to move the buttons to the left:

   .poch-top-to-bottom-compact .poch-root-node-list .poch-toolbar {
   left: 8px;
   right: auto;
   }

[Evgeniy]

You can also replace the arrow icon on the button by arbitrary text.

As you can see, the button is a link and it has already got text inside though it's not visible:

To make it visible, apply the following styles to the link and to the <div> container:

.rocToolbar .rocToolbarButton {
    background: none;
    text-indent: initial;
    width: auto;
    line-height: 15px;
    padding: 0px 5px;
    text-decoration: none;
    color: black;
}

You can replace the default text ("Drill here") by arbitrary one. For this purpose use localisation strings in a "Custom JavaScript" section of Org Chart Configuration Wizard:

Plumsail.OrgChart.LocalizationStrings.DrillDownToolbar.DrillHere = "Browse here";