React Org Chart Tutorial · Basic Styles

A default stylesheet is provided to give the basic structure and layout of the chart.

To make some simple style changes for your own applications, when a chart is created the chart nodes are tagged with particular class names so that you can easily pick them out and apply your own styles.

These class names and their purposes are:

// FIXME tables

For more control over the styles used, you are of course free to override any of the styles provided by the default stylesheet in the usual manner perhaps by making use of the standard className property.

The chart below shows custom styles applied to various elements using only these class names.

Styled Chart

Example pending...

CSS

.orgChart .node.level0 {
    background-color: #fff184;
}

.orgChart .node.level1 {
    background-color: #fbd2d2;
}

.orgChart .node.level2 {
    background-color: #e1e7f5;
}

.orgChart .node.level2.node1 {
    background-color: #ffffff;
}

.orgChart .node.level3 {
    background-color: #e1f5e9;
}

.orgChart .node.level4 {
    background-color: #f5dfd2;
}

.orgChart .node.level4 h2 {
    font-family: monospace;
}

.orgChart .stack {
    display: inline-block;
    border: 1px solid silver;
    border-radius: 8px;
    padding: 0.25em 1em;
    margin-top: 1.5em;
    background-color: cornsilk;
    box-shadow: 4px 4px 6px silver;
}

.orgChart .stack .node {
    font-size: 1.1em;
}

.orgChart .stack .node0 {
    font-weight: bold;
    border-top: 1px dotted silver;
    padding-top: 0.2em;
}

.orgChart .stack::before {
    content: 'Stacked';
    font-weight: bold;
}

.orgChart .line {
    border-color: #4d5273 !important;
}