OrgChartJS Docs

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
  • svg - tag selector

To change the color of all rectangular nodes:

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

To change the color of all circular nodes:

 
    [node-id] circle {
        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 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 width="130" 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;
    }

Here is the result:

To change the fullscreen background color:

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