How do I increase the line width connecting people

Org Chart Microsoft 365 version
1

Hi,

Can you give me some direction on increasing the line width / font for the lines that connect the people / boxes?

Thank you,

Chris

2

Hi Chris,

Thank you for your question.

To increase connecting lines width you can use CSS styles. Just copy and paste code below to CSS editor in the configuration wizard. This style sets width to 4px, you can specify your own.

Update: Lines rendering has been changed since version 2.2.28. Please use the code below instead.

.poch-content line { stroke-width: 4!important; stroke-linecap: round; }

This code will not work for version 2.2.28 and above.

[code].poch-web-part .poch-control .rocLineHorizontal {
height: 4px;
}

.poch-web-part .poch-control .rocLineDown {
width: 4px;
}

.poch-web-part .poch-control .rocLineUp {
width: 4px;
}

.rocNodeLines>.poch-assist-hor-line {
background-color: #dadada;
height: 4px;
}

.rocNodeLines>.box-vert-line {
width: 4px;
}

.rocNodeLines>.box-hor-line {
height: 4px;
}[/code]

3

Thank you Anton!

4

Hi,
this code not works for me
My code:
/Example: Change background color for all boxes/
/*
.pl-item .pl-item-template{
background-color: black;
border-color: black;
}
*/

/Width of the box/
.poch-web-part .poch-control .pl-item {
width: 214px;
text-align: center;
color: white;
}
*/

/Font size for the fields in the box/
.pl-item-card .field-container {
color: white;
font-size: 14px;
}

.pl-item-fields a, .pl-item-fields a:visited {
color: white;
}

.pl-item-fields a:hover {
color: white;
text-decoration: underline;
}

.poch-web-part .poch-control .rocLineHorizontal {
height: 4px;
}

.poch-web-part .poch-control .rocLineDown {
width: 4px;
}

.poch-web-part .poch-control .rocLineUp {
width: 4px;
}

.rocNodeLines > .poch-assist-hor-line {
background-color: #dadada;
height: 4px;
}

.rocNodeLines > .box-vert-line {
width: 4px;
}

.rocNodeLines > .box-hor-line {
height: 4px;
}

I check with F12 - there is storke syle - maybe something changed between these versions?

Artur

5

Hi Artur,

Rendering algorithm has been changed since version 2.2.28.

Please use this CSS style instead:

.poch-content line { stroke-width: 4!important; stroke-linecap: round; }

Open the configuration wizard of the web part and paste the code into Custom CSS step.