Concepts

An organisation chart is a top-down hierarchical structure composed of "nodes", a root node for the top of the chart, and any number of child nodes, nested as deeply as required. There is nothing particurlarly special about the root node, it is a node just like any other.

A chart is declared using the <OrgChart> component. Each node in the chart is declared using an <OrgChart.Node> component.

A chart node may specify, via the label property, a caption to display in the node. This caption can be a simple text string or another component.

You can optionally set your own className property on any of your chart components and this will be applied as expected to the chart.

Any standard data-* attributes on an <OrgChart.Node> component will be copied to the corresponding node when the chart is generated.

A chart node may also contain any additional mark-up and other components to use as the content for that node. This content can be used in addition to, or instead of, the label property.

The generated charts will have a default stylesheet applied so that at least the basic structure is drawn correctly. You are encouraged to override as much as you want in this stylesheet in your own applications to customise each chart to your own liking - obviously for things like the colour scheme, but also for example to make the chart nodes larger to accommodate whatever content you need.

Example Chart

JSX

const ExampleChart = () =>
    <OrgChart>
        <OrgChart.Node label="Root">
            <OrgChart.Node label="Child 1">
                <OrgChart.Node label="Child 1-1"/>
                <OrgChart.Node label="Child 1-2"/>
            </OrgChart.Node>
            <OrgChart.Node label="Child 2">
                <OrgChart.Node label="Child 2-1">
                    <OrgChart.Node label="Child 2-1-1"/>
                    <OrgChart.Node label="Child 2-1-2"/>
                    <OrgChart.Node label="Child 2-1-3"/>
                </OrgChart.Node>
                <OrgChart.Node label="Child 2-2">
                    <OrgChart.Node label="Child 2-2-1">
                        <OrgChart.Node label="Child 2-2-1-1"/>
                    </OrgChart.Node>
                </OrgChart.Node>
            </OrgChart.Node>
        </OrgChart.Node>
    </OrgChart>