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.

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.field_0 = 
    '<text data-width="135" style="font-size: 18px;" fill="#757575" x="100" y="55">{val}</text>';
OrgChart.templates.olivia.field_1 = 
    '<text data-width="135" style="font-size: 14px;" fill="#757575" x="100" y="76">{val}</text>';
OrgChart.templates.olivia.defs = 
    '<linearGradient id="{randId}" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#fff;stop-opacity:1" />'
    + '<stop offset="100%" style="stop-color:#eee;stop-opacity:1" /></linearGradient>';
OrgChart.templates.olivia.node = 
    '<rect fill="url(#{randId})" 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