How to Use Custom CSS

Sometimes you want to customize your OrgChart JS a little bit, like changing a font 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 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;
    }

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

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: #a3a3a3;
    }

To change the color of the second field:

 
    .field_1 {
        fill: #a3a3a3;
    }

To change the background color:

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

To always show the search bar:

 
    [data-id='search'] {
        display: block !important;
    }

Here is the result:

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);
    }