Predefined Templates
Modes
OrgChart JS can be displayed in "dark" or "light" modes by settong the mode option:
light mode
dark mode
Templates
OrgChart JS arrives with a number of predefined templates. You can change the template by setting the template option:
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
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
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
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
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
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
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
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
OrgChart.templates.ula = Object.assign({}, OrgChart.templates.ana);
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.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.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
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.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.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.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.expandCollapseSize = 30;
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.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.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.padding = [50, 20, 35, 20];
isla
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.ripple = {
radius: 0,
color: "#F57C00",
rect: { x: 0, y: 20, width: 180, height: 100 }
};
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.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.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.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>`;
deborah
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)
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
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'
}