Interface template

SVG <defs?> of the template

OrgChart.templates.myTemplate.defs = 
 `<filter id="{randId}" x="0" y="0" width="200%" height="200%">
     <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5"></feOffset>
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5"></feGaussianBlur>
     <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
 </filter>`;

Edit form header color

 OrgChart.templates.myTemplate.editFormHeaderColor = '#039BE5'

Size of the expandCollapse button

OrgChart.templates.myTemplate.expandCollapseSize = 30;

Node image

 OrgChart.templates.myTemplate.img_0 =  
    `<clipPath id="{randId}"><circle cx="50" cy="30" r="40"></circle></clipPath>
    <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="-10" width="80" height="80">
    </image>`;

Link Defines the link color, width and curve

OrgChart.templates.myTemplate.link = 
 `<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />`;

Adjust link positions

OrgChart.templates.myTemplate.linkAdjuster = {
 fromX: 0,
 fromY: -10,
 toX: 0,
 toY: 0
}

Link label

 OrgChart.templates.myTemplate.link_field_0 =  
    `<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>`;

Menu button

 OrgChart.templates.myTemplate.menuButton = 
     `<div style="position:absolute;right:{p}px;top:{p}px; width:40px;height:50px;cursor:pointer;" data-ctrl-menu="">
         <hr style="background-color: #7A7A7A; height: 3px; border: none;">
         <hr style="background-color: #7A7A7A; height: 3px; border: none;">
         <hr style="background-color: #7A7A7A; height: 3px; border: none;">
     </div>`;

Minimized template

OrgChart.templates.myTemplate.min = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.myTemplate.min.size = [250, 60];
OrgChart.templates.myTemplate.min.img_0 = "";
OrgChart.templates.myTemplate.min.field_0 =
 `<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="40" text-anchor="middle">{val}</text>`;
OrgChart.templates.myTemplate.min.field_1 = "";

Minus/collapse button

 OrgChart.templates.myTemplate.minus =
 `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
 <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>`;

Node definition - A string that should contains SVG markup.

OrgChart.templates.myTemplate.node =
 `<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>`;

EMode circle menu button

 OrgChart.templates.myTemplate.nodeCircleMenuButton = {
     radius: 18,
     x: 250,
     y: 60,
     color: '#fff',
     stroke: '#aeaeae'
 }

Node menu button

 OrgChart.templates.myTemplate.nodeMenuButton = 
     `<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" data-ctrl-n-menu-id="{id}">
         <rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect>
         <circle cx="0" cy="0" r="2" fill="#ffffff"></circle>
         <circle cx="7" cy="0" r="2" fill="#ffffff"></circle><circle cx="14" cy="0" r="2" fill="#ffffff"></circle>
     </g>`;

Inner spacing around the node content area.

Plus/expand button

OrgChart.templates.myTemplate.plus =
 `<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>
 <line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#aeaeae"></line>
 <line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#aeaeae"></line>`;

Pointer

OrgChart.templates.myTemplate.pointer =
 `<g data-pointer="pointer" transform="matrix(0,0,0,0,100,100)"> 
     <radialGradient id="pointerGradient">
         <stop stop-color="#ffffff" offset="0" />
         <stop stop-color="#C1C1C1" offset="1" />
     </radialGradient>
     <circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>
 </g>`;

Ripple

OrgChart.templates.myTemplate.ripple = 
 radius: 100,
 color: "#e6e6e6",
 rect: null
}

Size of the template

OrgChart.templates.myTemplate.size = [200, 100];

Template main svg definition

OrgChart.templates.myTemplate.svg =
 `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     style="display:block;" width="{w}" height="{h}" viewBox="{viewBox}">{content}
 </svg>`;

Sets the maximum height of the Tree List. When the content exceeds this height, vertical scrolling is enabled. If set to Number.MAX_SAFE_INTEGER no scrolling is enabled.

OrgChart.templates.myTemplate.treeListMaxHeight = 450;