Show / Hide Table of Contents

Predefined Templates

Modes

Org Chart JS can be displayed in "dark" or "light" modes by settong the mode option:

light mode
BALKAN Code Edit in BALKAN Code

dark mode
BALKAN Code Edit in BALKAN Code

Templates

Org Chart JS arrives with a number of predefined templates. You can change the template by setting the template option. Here is an example: 

 
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "olivia",
        ...
    });

You can get the source code of any of the templates and change it. For example to change the size of the node shape, you need to change the size definition of the template.

The default template is ana. All the predefined templates inherits ana. If you don't have a predefined property for your template, you need to get it from the ana template.

olivia
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.olivia = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.olivia.defs = 
    `<style>
        #olivia_gradient {
            --color-stop-1: #ffffff;
            --color-stop-2: #eeeeee;
            --opacity-stop: 1;
        }
        .olivia-f0 {
            font-size: 18px;
            fill: #757575;
        }
        .olivia-f1 {
            font-size: 14px;
            fill: #757575;
        }
        .boc-dark .olivia-f0, .boc-dark .olivia-f1 {
            fill: #aeaeae;
        }
        .boc-dark #olivia_gradient {
            --color-stop-1: #646464;
            --color-stop-2: #363636;
            --opacity-stop: 1;
        }
    </style>
    '<linearGradient id="olivia_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="var(--color-stop-1)" stop-opacity="var(--opacity-stop)" />
        <stop offset="100%" stop-color="var(--color-stop-2)" stop-opacity="var(--opacity-stop)" />
    </linearGradient>`;
OrgChart.templates.olivia.field_0 = 
    '<text ' + OrgChart.attr.width + ' ="135" class="olivia-f0" x="100" y="55">{val}</text>';
OrgChart.templates.olivia.field_1 = 
    '<text ' + OrgChart.attr.width + ' ="135" class="olivia-f1" x="100" y="76">{val}</text>';
OrgChart.templates.olivia.node = 
    '<rect fill="url(#olivia_gradient)" x="0" y="0" height="{h}" width="{w}" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>';
OrgChart.templates.olivia.img_0 = 
    '<clipPath id="{randId}"><circle cx="50" cy="60" r="40"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80"></image>';
OrgChart.templates.olivia.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="#AEAEAE"></circle><circle cx="7" cy="0" r="2" fill="#AEAEAE">'
        + '</circle><circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle>'
    + '</g>';


diva
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.diva = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.diva.size = [200, 170];
OrgChart.templates.diva.node = 
    '<rect x="0" y="80" height="90" width="200" fill="#039BE5"></rect>'
    + '<circle cx="100" cy="50" fill="#ffffff" r="50" stroke="#039BE5" stroke-width="2"></circle>';
OrgChart.templates.diva.img_0 = 
    '<clipPath id="{randId}"><circle cx="100" cy="50" r="45"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="50" y="0" width="100" height="100"></image>';
OrgChart.templates.diva.field_0 = 
    '<text data-width="185" style="font-size: 18px;" fill="#ffffff" x="100" y="125" text-anchor="middle">{val}</text>';
OrgChart.templates.diva.field_1 = 
    '<text data-width="185" style="font-size: 14px;" fill="#ffffff" x="100" y="145" text-anchor="middle">{val}</text>';
OrgChart.templates.diva.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="#039BE5" offset="1" /></radialGradient>'
        + '<circle cx="16" cy="16" r="16" stroke-width="1" stroke="#acacac" fill="url(#pointerGradient)"></circle>'
    + '</g>';
OrgChart.templates.diva.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,175,155)" 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>';


mila
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.mila = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.mila.node = 
    '<rect x="0" y="0" height="120" width="250" fill="#039BE5" stroke-width="1" stroke="#aeaeae"></rect>'
    + '<rect x="-5" y="70" height="30" width="260" fill="#ffffff" stroke-width="1" stroke="#039BE5">'
    + '</rect><line x1="-5" x2="0" y1="100" y2="105" stroke-width="1" stroke="#039BE5" />'
    + '<line x1="255" x2="250" y1="100" y2="105" stroke-width="1" stroke="#039BE5" />';
OrgChart.templates.mila.img_0 = 
    '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="20" y="5" width="64" height="64"></image>';
OrgChart.templates.mila.field_0 = 
    '<text data-width="240" style="font-size: 18px;" fill="#039BE5" x="125" y="92" text-anchor="middle">{val}</text>';
OrgChart.templates.mila.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,110)" 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>';


polina
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.polina = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.polina.size = [300, 80];
OrgChart.templates.polina.ripple = {
    color: "#e6e6e6",
    radius: 40,
    rect: null
};
OrgChart.templates.polina.node = 
    '<rect x="0" y="0" height="80" width="300" fill="#039BE5" stroke-width="1" stroke="#686868" rx="40" ry="40"></rect>';
OrgChart.templates.polina.img_0 = 
    '<clipPath id="{randId}"><circle cx="40" cy="40" r="35"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="0" y="0" width="80" height="80"></image>';
OrgChart.templates.polina.field_0 = 
    '<text data-width="210" style="font-size: 18px;" fill="#ffffff" x="80" y="30" text-anchor="start">{val}</text>';
OrgChart.templates.polina.field_1 = 
    '<text data-width="210" style="font-size: 14px;" fill="#ffffff" x="80" y="55" text-anchor="start">{val}</text>';
OrgChart.templates.polina.link = 
    '<path stroke="#686868" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';
OrgChart.templates.polina.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,285,33)" 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="0" cy="7" r="2" fill="#ffffff"></circle>'
            + '<circle cx="0" cy="14" r="2" fill="#ffffff"></circle>'
    + '</g>';


mery
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.mery = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.mery.ripple = {
    color: "#e6e6e6",
    radius: 50,
    rect: null
};
OrgChart.templates.mery.node = 
    '<rect x="0" y="0" height="120" width="250" fill="#ffffff" stroke-width="1" stroke="#686868" rx="50" ry="50"></rect>'
    + '<rect x="0" y="45" height="30" width="250" fill="#039BE5" stroke-width="1"></rect>';
OrgChart.templates.mery.link = 
    '<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';
OrgChart.templates.mery.img_0 = 
    '<clipPath id="{randId}"><circle cx="125" cy="60" r="24"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="95" y="33" width="60" height="60"></image>';
OrgChart.templates.mery.field_0 = 
    '<text data-width="220" style="font-size: 18px;" fill="#039BE5" x="125" y="30" text-anchor="middle">{val}</text>';
OrgChart.templates.mery.field_1 = 
    '<text data-width="220" style="font-size: 14px;" fill="#039BE5" x="125" y="100" text-anchor="middle">{val}</text>';
OrgChart.templates.mery.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,60)" 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>';


rony
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.rony = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.rony.svg = 
    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:#E8E8E8;display:block;" '
          + 'width="{w}" height="{h}" viewBox="{viewBox}">{content}</svg>';
OrgChart.templates.rony.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>';
OrgChart.templates.rony.size = [180, 250];
OrgChart.templates.rony.ripple = {
    color: "#F57C00",
    radius: 5,
    rect: null
};
OrgChart.templates.rony.img_0 = 
    '<clipPath id="{randId}"><circle cx="90" cy="160" r="60"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="30" y="100" width="120" height="120"></image>';
OrgChart.templates.rony.node = 
    '<rect filter="url(#{randId})" x="0" y="0" height="250" width="180" fill="#ffffff" stroke-width="0" rx="5" ry="5"></rect>';
OrgChart.templates.rony.field_0 = 
    '<text data-width="165" style="font-size: 18px;" fill="#039BE5" x="90" y="40" text-anchor="middle">{val}</text>';
OrgChart.templates.rony.field_1 = 
    '<text data-width="165" style="font-size: 14px;" fill="#F57C00" x="90" y="60" text-anchor="middle">{val}</text>';
OrgChart.templates.rony.field_2 = 
    '<text data-width="165" style="font-size: 14px;" fill="#FFCA28" x="90" y="80" text-anchor="middle">{val}</text>';
OrgChart.templates.rony.link = 
    '<path stroke="#039BE5" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />';
OrgChart.templates.rony.plus = 
    '<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>'
    + '<line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>'
    + '<line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#039BE5"></line>';

OrgChart.templates.rony.minus = 
    '<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>'
    + '<line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>';
OrgChart.templates.rony.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,155,235)" 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="#F57C00"></circle>'
            + '<circle cx="7" cy="0" r="2" fill="#F57C00"></circle>'
            + '<circle cx="14" cy="0" r="2" fill="#F57C00"></circle>'
    + '</g>';


belinda
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.belinda = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.belinda.size = [180, 180];
OrgChart.templates.belinda.ripple = {
    radius: 90,
    color: "#e6e6e6",
    rect: null
};

OrgChart.templates.belinda.node = 
    '<circle cx="90" cy="90" r="90" fill="#039BE5" stroke-width="1" stroke="#aeaeae"></circle>';
OrgChart.templates.belinda.img_0 = 
    '<clipPath id="{randId}"><circle cx="90" cy="45" r="40"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="50" y="5" width="80" height="80"></image>';
OrgChart.templates.belinda.field_0 = 
    '<text data-width="170" style="font-size: 18px;" text-anchor="middle" fill="#ffffff" x="90" y="105">{val}</text>';
OrgChart.templates.belinda.field_1 = 
    '<text data-width="160" style="font-size: 14px;" text-anchor="middle" fill="#ffffff" x="90" y="125">{val}</text>';
OrgChart.templates.belinda.link = 
    '<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';
OrgChart.templates.belinda.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,79,5)" data-ctrl-n-menu-id="{id}">'
        + '<rect x="0" y="0" fill="#000000" fill-opacity="0" width="22" height="22"></rect>'
        + '<line stroke-width="2" stroke="#000" x1="0" y1="3" x2="22" y2="3"></line>'
        + '<line stroke-width="2" stroke="#000" x1="0" y1="9" x2="22" y2="9"></line>'
        + '<line stroke-width="2" stroke="#000" x1="0" y1="15" x2="22" y2="15"></line>'
    + '</g>';


ula
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.ula = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.ula.field_0 = 
    '<text data-width="145" style="font-size: 18px;" fill="#039BE5" x="100" y="55">{val}</text>';
OrgChart.templates.ula.field_1 = 
    '<text data-width="145" data-text-overflow="multiline" style="font-size: 14px;" fill="#afafaf" x="100" y="76">{val}</text>';
OrgChart.templates.ula.node = 
    '<rect x="0" y="0" height="{h}" width="{w}" fill="#ffffff" stroke-width="1" stroke="#aeaeae"></rect>'
     + '<line x1="0" y1="0" x2="250" y2="0" stroke-width="2" stroke="#039BE5"></line>';
OrgChart.templates.ula.img_0 = 
    '<clipPath id="{randId}"><circle cx="50" cy="60" r="40"></circle></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80"></image>';
OrgChart.templates.ula.menu = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,12)" data-ctrl-n-menu-id="{id}">'
        + '<rect x="-4" y="-10" fill="#ffffff" width="22" height="22"></rect>'
        + '<circle cx="0" cy="0" r="2" fill="#039BE5"></circle>'
        + '<circle cx="7" cy="0" r="2" fill="#039BE5"></circle>'
        + '<circle cx="14" cy="0" r="2" fill="#039BE5"></circle>'
    + '</g>';
OrgChart.templates.ula.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="#AEAEAE"></circle>'
        + '<circle cx="7" cy="0" r="2" fill="#AEAEAE"></circle>'
        + '<circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle>'
    + '</g>';


ana
BALKAN Code Edit in BALKAN Code 


 

    OrgChart.templates.ana.defs = "";
    OrgChart.templates.ana.size = [250, 120];
    OrgChart.templates.ana.linkAdjuster = {
        fromX: 0,
        fromY: 0,
        toX: 0,
        toY: 0
    };
    OrgChart.templates.ana.ripple = {
        radius: 0,
        color: "#e6e6e6",
        rect: null
    };
    OrgChart.templates.ana.expandCollapseSize = 30;
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.link = 
        '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />';
    OrgChart.templates.ana.assistanseLink = 
        '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" '
        + ' d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />';
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.node = 
        '<rect x="0" y="0" height="{h}" width="{w}" fill="#039BE5" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>';
    OrgChart.templates.ana.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>'; 
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.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>';
    OrgChart.templates.ana.link_field_0 = 
        '<text text-anchor="middle" fill="#aeaeae" data-width="290" x="0" y="0" style="font-size:10px;">{val}</text>';
    OrgChart.templates.ana.field_0 = 
        '<text data-width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="95" text-anchor="middle">{val}</text>';
    OrgChart.templates.ana.field_1 = 
        '<text data-width="130" data-text-overflow="multiline" style="font-size: 14px;" fill="#ffffff" x="230" y="30" text-anchor="end">{val}</text>';
    OrgChart.templates.ana.padding = [50, 20, 35, 20];


isla
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.isla = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.isla.defs = 
    '<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="isla-shadow">'
        + '<feOffset dx="0" dy="4" in="SourceAlpha" result="shadowOffsetOuter1" />'
        + '<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />'
        + '<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />'
        + '<feMerge><feMergeNode in="shadowMatrixOuter1" /><feMergeNode in="SourceGraphic" /></feMerge>'
    + '</filter>';
OrgChart.templates.isla.size = [180, 120];
OrgChart.templates.isla.node = 
    '<rect filter="url(#isla-shadow)" x="0" y="20" rx="7" ry="7" height="100" width="180" fill="#FFF" stroke-width="1" stroke="#039BE5"></rect>'
    + '<rect x="25" y="75" rx="10" ry="10" height="20" width="130" fill="#039BE5" stroke-width="3" stroke="#039BE5"></rect>'
    + '<rect fill="#ffffff" stroke="#039BE5" stroke-width="1" x="70" y="0" rx="13" ry="13" width="40" height="40"></rect>'
    + '<circle stroke="#FFCA28" stroke-width="3" fill="none" cx="90" cy="12" r="8"></circle>'
    + '<path d="M75,34 C75,17 105,17 105,34" stroke="#FFCA28" stroke-width="3" fill="none"></path>';
OrgChart.templates.isla.field_0 = 
    '<text data-width="120" style="font-size: 12px;" fill="#fff" x="90" y="90" text-anchor="middle">{val}</text>';
OrgChart.templates.isla.field_1 = 
    '<text data-width="160" style="font-size: 13px;" fill="#039BE5" x="90" y="64" text-anchor="middle">{val}</text>';
OrgChart.templates.isla.img_0 = 
    '<clipPath id="{randId}">'
        + '<rect filter="url(#isla-shadow)" fill="#ffffff" stroke="#039BE5" stroke-width="1" x="70" y="0" rx="13" ry="13" width="40" height="40"></rect>'
    + '</clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="70" y="0" width="40" height="40"></image>';
OrgChart.templates.isla.minus = 
    '<circle cx="15" cy="15" r="15" fill="#F57C00" stroke="#F57C00" stroke-width="1"></circle>'
    + '<line x1="8" y1="15" x2="22" y2="15" stroke-width="1" stroke="#ffffff"></line>';
OrgChart.templates.isla.plus = 
    '<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#039BE5" stroke-width="1"></circle>'
    + '<line x1="4" y1="15" x2="26" y2="15" stroke-width="1" stroke="#039BE5"></line>'
    + '<line x1="15" y1="4" x2="15" y2="26" stroke-width="1" stroke="#039BE5"></line>';
OrgChart.templates.isla.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,83,45)" 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="#F57C00"></circle>'
        + '<circle cx="7" cy="0" r="2" fill="#F57C00"></circle>'
        + '<circle cx="14" cy="0" r="2" fill="#F57C00"></circle>'
    +'</g>';

OrgChart.templates.isla.ripple = {
    radius: 0,
    color: "#F57C00",
    rect: { x: 0, y: 20, width: 180, height: 100 }
};


deborah
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.deborah = Object.assign({}, OrgChart.templates.polina);
   
OrgChart.templates.deborah.size = [150, 150];
OrgChart.templates.deborah.node = 
    '<rect x="0" y="0" height="150" width="150" fill="#039BE5" stroke-width="1" stroke="#686868" rx="15" ry="15"></rect>';

OrgChart.templates.deborah.img_0 = 
    '<clipPath id="{randId}"><rect fill="#ffffff" stroke="#039BE5" stroke-width="1" x="5" y="5" rx="15" ry="15" width="140" height="140"></rect></clipPath>'
    + '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="5" y="5" width="140" height="140"></image>'
    + '<rect x="3" y="5" height="30" width="144" fill="#039BE5" opacity="0.5" rx="3" ry="3"></rect>'
    + '<rect x="3" y="115" height="30" width="144" fill="#039BE5" opacity="0.5" rx="3" ry="3"></rect>';
   
OrgChart.templates.deborah.field_0 = 
    '<text data-width="125" data-text-overflow="ellipsis" style="font-size: 18px;" fill="#ffffff" x="15" y="25" text-anchor="start">{val}</text>';
OrgChart.templates.deborah.field_1 = 
    '<text data-width="105" data-text-overflow="ellipsis" style="font-size: 11px;" fill="#ffffff" x="15" y="135" text-anchor="start">{val}</text>';

OrgChart.templates.deborah.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,125,130)" 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>';


group template (More for groups, you can find in Sub Trees doc page)
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.group = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.group.size = [250, 120];
OrgChart.templates.group.node = 
    '<rect rx="50" ry="50" x="0" y="0" height="{h}" width="{w}" fill="#f2f2f2" stroke-width="0"></rect>';
OrgChart.templates.group.link = 
    '<path stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';
OrgChart.templates.group.nodeMenuButton = 
    '<g style="cursor:pointer;" transform="matrix(1,0,0,1,{ew},25)" data-ctrl-n-menu-id="{id}">'
    + '<g transform="matrix(1,0,0,1,-22,-8)">'
    + '<rect x="0" y="0" fill="red" fill-opacity="0" width="18" height="22">'
    + '</rect><line x1="0" y1="2" x2="9" y2="2" stroke="#aeaeae" stroke-width="1">'
    + '</line><line x1="0" y1="9" x2="18" y2="9" stroke="#aeaeae" stroke-width="1">'
    + '</line><line x1="0" y1="16" x2="22" y2="16" stroke="#aeaeae" stroke-width="1">'
    + '</line></g></g>';
OrgChart.templates.group.field_0 = 
    '<text data-width="230" style="font-size: 18px;" fill="#aeaeae" x="{cw}" y="30" text-anchor="middle">'
    + '{val}</text>';
OrgChart.templates.group.field_1 = '';

OrgChart.templates.group.ripple = {
    radius: 50,
    color: "#aeaeae"
};


We have also a base template that you can use or inherit and change:

base template
BALKAN Code Edit in BALKAN Code 


 
OrgChart.templates.base = {
    defs: '',
    size: [250, 120],
    expandCollapseSize: 30,
    linkAdjuster: {
        fromX: 0,
        fromY: 0,
        toX: 0,
        toY: 0
    },
    ripple: {
        radius: 0,
        color: "#e6e6e6",
        rect: null
    },
    assistanseLink: '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="2px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} {xd},{yd} L{xe},{ye}" />',
    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>',
    link: '<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="M{xa},{ya} {xb},{yb} {xc},{yc} L{xd},{yd}" />',
    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>',
    node: '<rect x="0" y="0" height="120" width="250" fill="none" stroke-width="1" stroke="#aeaeae" rx="7" ry="7"></rect>',
    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>',
    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>',
    nodeMenuButton: 
        '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" ' + OrgChart.attr.control_node_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>',
    menuButton: 
        '<div style="position:absolute;right:{p}px;top:{p}px; width:30px;height:50px;cursor:pointer;" ' + OrgChart.attr.control_export_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>',
    img_0: 
        '<clipPath id="{randId}"><circle cx="60" cy="60" r="40"></circle></clipPath>
        <image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="20" y="20" width="80" height="80"></image>',
    link_field_0: '<text text-anchor="middle" fill="#aeaeae" ' + OrgChart.attr.width + ' ="290" x="0" y="0" style="font-size:10px;">{val}</text>',
    editFormHeaderColor: '#039BE5'
In this article