Caprica Software

React Org Chart Tutorial


A common use-case for an organisation chart will be to perform some action like a drill-down when a user clicks on a particular node in the chart.

There are two ways this can be done.

The first is by making use of chart events - you can register a handler on your chart component so that you can be notified of any click on a chart node, including any stacked and adjunct nodes. Your click handler will then perform whatever navigation/routing changes as needed.

The second approach is to include standard hyperlinks, or since this a ReactJS application some type of router link component, in your node content.

Events have already been covered by an earlier tutorial. The chart below shows an example of links within node content.

There is nothing special to consider here, standard links just work as you'd expect.

Clicking a link in the chart will open a new page at Metacritic.

Example Chart

Example pending...