React OrganizationChart

React OrganizationChart visualizes hierarchical organization data.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import { OrganizationChart } from 'primereact/organizationchart';

Getting Started

OrganizationChart requires a model of TreeNode as its value.

export const OrganizationChartDemo = () => {

    const data = [{
        label: 'F.C Barcelona',
        expanded: true,
        children: [
            {
                label: 'F.C Barcelona',
                expanded: true,
                children: [
                    {
                        label: 'Chelsea FC'
                    },
                    {
                        label: 'F.C. Barcelona'
                    }
                ]
            },
            {
                label: 'Real Madrid',
                expanded: true,
                children: [
                    {
                        label: 'Bayern Munich'
                    },
                    {
                        label: 'Real Madrid'
                    }
                ]
            }
        ]
    }];

    return (
        <OrganizationChart value={data}></OrganizationChart>
    )
}

Templating

Label of the treenode is displayed inside the node content by default and templating enables further customization.

<OrganizationChart value={data} nodeTemplate={nodeTemplate}></OrganizationChart>

const nodeTemplate = (node) => {
    if (node.type === "person") {
        return (
            <div>
                <div className="node-header">{node.label}</div>
                    <div className="node-content">
                        <img alt={node.data.avatar} src={`showcase/demo/images/organization/${node.data.avatar}`} style={{ width: '32px' }}/>
                    <div>{node.data.name}</div>
                </div>
            </div>
        );
    }

    if (node.type === "department") {
        return node.label;
    }
}

Expand/Collapse State

In order to display a treenode as expanded by default, set "expanded" property as true in your model.

Selection

OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting selectionMode property to the corresponding mode, defining selection property along with selectionChange callback.

<OrganizationChart value={data} selectionMode="single" selection={selectedNode} onSelectionChange={event => setSelectedNode(event.data)}></OrganizationChart>

Theming

OrganizationChart supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact OrganizationChart showcase for demos and documentation.