Caprica Software

React Org Chart Tutorial

The default stylesheet provided uses quite a small fixed size for the chart nodes. You are free to override this by using your own stylesheet to set your preferred size.


Styled Chart

Example pending...

CSS

div.orgChart div.node {
width: 200px;
height: 286px;
}

Oversized Content

You can achieve some interesting effects if you choose your node sizes and content carefully, for example it may not always desirable or necessary to fit your node content to the node, as shown in the chart below.

Example pending...

CSS

div.orgChart div.node {
width: 200px;
height: 203px;
background-color: white;
}