Caprica Software

React Org Chart Tutorial

Basic Chart

This example shows a trivial organisation chart with plain text labels.

The Finished Chart

Example pending...

JSX

BasicChart.jsx
const BasicChart = () =>
    <OrgChart>
        <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>