Basic Stacking

"Stacking" in a chart is a way to provide an alternative view of some chart nodes, by showing some nodes as a simple list rather than hierarchical nodes. The main idea is to fit lower-level or less important node content more efficiently into the chart.

"Level" is used to describe the position (it a zero-based index) of one or more nodes at the same level in the chart. The root node is level zero, the immediately children of the root nodes are all level one, the children of those children are all level two, and so on.

"Depth" is used to specify how many (it is a one-based count) chart levels should be displayed before stacking is considered. Stacking is optional and depth can be used to restrict how many levels are displayed in the chart regardless of whether stacking is used or not. A depth value of -1 can be used to specify all levels.

The <OrgChart> component accepts optional depth and stack properties to control this behaviour.

Note that stacking requires the use of the label attribute on <OrgChart.Node> components as it is that label, only, that is used to render the stacked variant of the node.

Example Chart

Use the Depth and Stack controls to adjust the chart display.

JSX

const BasicStackingChart = (props) =>
    <OrgChart depth={props.depth} stack={props.stack}>
        <OrgChart.Node label="Initech">
            <OrgChart.Node label="Bill Lumbergh">
                <OrgChart.Node label="Software">
                    <OrgChart.Node label="Peter Gibbons"/>
                    <OrgChart.Node label="Michael Bolton"/>
                    <OrgChart.Node label="Samir Nagheenanajar"/>
                </OrgChart.Node>
                <OrgChart.Node label="Collation">
                    <OrgChart.Node label="Milton Waddams"/>
                </OrgChart.Node>
            </OrgChart.Node>
            <OrgChart.Node label="The Bobs">
                <OrgChart.Node label="Bob Slydell"/>
                <OrgChart.Node label="Bob Porter"/>
            </OrgChart.Node>
        </OrgChart.Node>
    </OrgChart>