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>