BALKAN OrgChart React - React Org Chart Library | Docs

How to Use Custom CSS ​

Sometimes you may want to customize your OrgChart React - for example, changing colors or font styles. You can use custom CSS to override or add new styles to the chart.

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 element - tag selector

Nodes ​

To change the color of all rectangular nodes

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

To change the color of all circular nodes

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

To change the color of a specific node

(node with id 1)

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

To change the color by data tag

(assuming the node has a tag "red")

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

To change the color of all links

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

To change the color of a specific link

(link from 4 to 3)

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

Expand/Collapse buttons ​

To change the color of all expand/collapse buttons

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

To change the color of a specific button

(button with id 3)

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

Node menu buttons ​

To change the color of all node menu buttons

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

Background ​

To change the background color of the chart you should set an id for the chart element:

ts
 return <OrgChartReact id="tree" template='myTemplate1'>

then you can set the background color in the CSS:

css
#tree {
    background-color: #FFF4D6;
}

CSS Customization Code Example