Caprica Software

React Org Chart Tutorial

Events

Charts can generate events, specifically if a chart node is clicked on (or tapped) an event will be generated.

You register to receive events by specifying a handler function in an onClick property on the <OrgChart> component.

All chart nodes, including adjuncts and stacked nodes, will generate an event when clicked.

The event handler when invoked will receive two parameters: the first being the original event object; the second being the set of standard data-* attributes that were associated with the node that was clicked.

It is up to your own application to add whatever data attributes are needed to identify which particular node was clicked.

The chart below shows some basic event handling. If you click various nodes on this chart the events will be displayed below the chart.

Example Chart

Example pending...

Chart Clicks

JSX

EventChart.jsx
const EventChart = () =>
    <OrgChart onClick={this.handleClick}>
        <OrgChart.Node label="Initech">
            <OrgChart.Node label="Bill Lumbergh" data-name="Lumbergh">
                <OrgChart.Adjunct label="Rob Newhouse" data-name="Rob"><i>Legal</i></OrgChart.Adjunct>
                <OrgChart.Node label="Software">
                    <OrgChart.Node label="Peter Gibbons" data-name="Peter"/>
                    <OrgChart.Node label="Michael Bolton" data-name="Michael"/>
                    <OrgChart.Node label="Samir Nagheenanajar" data-name="Samir"/>
                </OrgChart.Node>
                <OrgChart.Node label="Collation">
                    <OrgChart.Node label="Milton Waddams" data-name="Milton"/>
                </OrgChart.Node>
            </OrgChart.Node>
            <OrgChart.Node label="The Bobs">
                <OrgChart.Node label="Bob Slydell" data-name="Bob"/>
                <OrgChart.Node label="Bob Porter" data-name="The Other Bob"/>
            </OrgChart.Node>
        </OrgChart.Node>
    </OrgChart>