react-org-chart

Project Summary

Simple ReactJS component to easily generate attractive organisation charts.

Web
ReactJS
Open Source
Commercial

Licensing

Apache 2.0

Gallery

A simple organisation chart using the default styles provided by the component.

A simple organisation chart with stacking of the lowest level nodes. Stacked nodes have a simpler and more compact appearance.

A simple organisation chart with an adjunct node associated with another node.

An organisation chart styled for larger content. The component provides reasonable default styles but you are encouraged to override these styles as you see fit according to your own requirements.

It is possible to override as many or as few styles as you like to get the appearance you desire. Charts can look radically different even with simple style changes. Everthing can be styled, including adjuncts and stacked nodes.

Introduction

This project is a complete rewrite of the original jquery-org-chart plugin, providing equivalent or better functionality of that plugin in a much nicer ReactJS component package.

As is the case with our original jQuery plugin, HTML/CSS purists likely would not be too happy with the implementation since it also uses nested tables to achieve the layout. Nevertheless, it works pretty well and you can make nice looking interactive organisational charts with it quite easily.

All you need to do to get easy, great-looking charts is to write out your hierarchical chart structure using the ReactJS components provided by this package. You can have as much nesting as you want to achieve the desired chart layout.

Tutorials

Some tutorials are available.

Show Us

If you've used this plug-in please tell us about it and send a link or screen-shot of your beautiful chart if it's public!