How to Use Custom CSS

Sometimes you want to customize your OrgChart JS a little bit, like changing a color or a font style. You can use custom CSS to overwrite or add new CSS properties to the chart styles.

CSS selectors that you can use

• [data-n-id] - attribute selector
• [data-l-id] - attribute selector
• [data-ctrl-ec-id] - attribute selector
• [data-ctrl-n-menu-id] - attribute selector
• svg - tag selector

Nodes

To change the color of all rectangular nodes:

 
   Copy   
[data-n-id] rect {
    fill: #016e25;
}
 

To change the color of all circular nodes:

 
   Copy   
[data-n-id] circle {
    fill: #016e25;
}
 

To change the color of specified node (node with id 1 in the example above):

 
   Copy   
[data-n-id='1'] rect {
    fill: #750000;
}
 

To change the color by data tag (we assume that the node has a data tag "red"):

 
   Copy  
.node.red rect {
    fill: #750000;
}
 

Links

To change the color of all links:

 
   Copy  
[data-l-id] path {
    stroke: #750000;
}
 

To change the color of specified link (link from 4 to 3 in the example above):

 
   Copy  
[data-l-id='[3][4]'] path {
    stroke: #016e25;
}
 

Expand-collapse buttons:

To change the color of all expand-collapse buttons:

 
   Copy  
[data-ctrl-ec-id] circle {
    fill: #750000 !important;
}
 

To change the color of specified expand-collapse button (expand-collapse button with id 3 in the example above):

 
   Copy  
[data-ctrl-ec-id='3'] circle {
    fill: #016e25 !important;
}
 

Node menu buttons:

To change the color of all node menu buttons:

 
   Copy  
[data-ctrl-n-menu-id] circle {
    fill: #bfbfbf;
}
 

Fields

To change a field, you need to define a class in the field declaration.

 
   Copy  
OrgChart.templates.ana.field_0 = 
    '<text width="230" style="font-size: 18px;" fill="#ffffff" x="125" y="95" text-anchor="middle" class="field_0">{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" class="field_1">{val}</text>';
 

To change the color and the font-family of the first field:

   
       Copy   
.field_0 {
    font-family: Impact;
    text-transform: uppercase;
    fill: #cfcfcf;
}
 

To change the color of the second field:

 
   Copy   
.field_1 {
    fill: #cfcfcf;
}
 

Other selectors

To change the background color:

 
   Copy   
#tree>svg {
    background-color: #2E2E2E;
}
 

To change the mode use this option in the configuration:

 
   Copy   
let chart = new OrgChart(document.getElementById("tree"), {
    mode: "dark",
});
 

Here is the result:

Edit in BALKAN Code

To change the fullscreen background color:

     
   Copy  
#tree:fullscreen {
    background-color: #2E2E2E;
}
 

To move text vertically:

     
   Copy  
[data-n-id="3"] text:nth-of-type(2) tspan:nth-of-type(1) {
    baseline-shift: 10px;
}

[data-n-id="3"] text:nth-of-type(2) tspan:nth-of-type(2) {
    baseline-shift: 10px;
}


 

To add node shadow on hover:

     
   Copy  
[data-n-id] rect:hover {
    filter: drop-shadow( 4px 5px 5px #aeaeae);
}


 

To hover the clinks:

 
   Copy   
[data-c-l-from]:hover {
    cursor: pointer !important;
}

[data-c-l-from]:hover>path:first-child {
    stroke-width: 3;
}
 

To change link labels color:

 
   Copy   
[data-l-id] text {  
    fill: #750000;
}
 

To change the search items:

 
   Copy   
/* border color */
div.boc-light .boc-input>input{
    border-color: red ;
}

/* input field on focus */
div.boc-light .boc-input>input:focus {
    border-color: green;
}

/* the search label on focus */
.boc-light .boc-input>label.focused, .boc-dark .boc-input>label.focused {
    color: green !important;
}

/* the hovered search resutt */
.boc-light .boc-search [data-search-item-id]:hover, .boc-light .boc-search [data-selected=yes] {
    background-color: green !important;
}

/* close (X) button */
[data-input-btn] {
    color: red !important;
}