Show / Hide Table of Contents

How to Use Custom CSS

Sometimes you want to customize your Org Chart 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

To change the color of all rectangular nodes:

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

To change the color of all circular nodes:

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

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

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

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

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

To change the color of all links:

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

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

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

To change the color of all expand-collapse buttons:

 
    [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):

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

To change the color of all node menu buttons:

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

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

 
   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:

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

To change the color of the second field:

 
    .field_1 {
        fill: #cfcfcf;
    }

To change the mode:

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

To change the background color:

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

Here is the result:

BALKAN Code Edit in BALKAN Code

To change the fullscreen background color:

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

To move text vertically:

     
    [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:

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

To hover the clinks:

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

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

To change link labels color:

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

To change the search items:

 

     /* 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;
    }


    


````
In this article