OrgChart JS Documentation

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

  • [node-id] - attribute selector
  • [link-id] - attribute selector
  • [control-expcoll-id] - attribute selector
  • [control-node-menu-id] - attribute selector
  • .bg-field_0 (if field_0 is defined) - class selector
  • svg - tag selector
  • .bg-search-table - class selector

To change the color of all nodes:

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

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

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

To change the color of all links:

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

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

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

To change the color of all expand-collapse buttons:

 
    [control-expcoll-id] circle {
        fill: #750000;
    }

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

 
    [control-expcoll-id='3'] circle {
        fill: #016e25;
    }

To change the color of all node menu buttons:

 
    [control-node-menu-id] circle {
        fill: #bfbfbf;
    }

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 change the color of the search control:

 
    .bg-search-table {
        background-color: #2E2E2E !important;
    }

    .bg-search-table input {
        background-color: #2E2E2E !important;
    }

Here is the result: