Organizational Chart with Custom Layout

Demonstrates a sophisticated organizational chart with custom mixed tree layout and level-based card styles.

Organizational Chart with Custom Layout

Functional Overview

This example demonstrates a sophisticated organizational chart using a custom mixed tree layout. It features different card styles for different organizational levels (BULeader, Director, Leader, Manager) with color-coded backgrounds.

Implementation of Key Features

Custom Mixed Tree Layout

const myMixTreeLayout = useRef(new MyMixTreeLayout(graphInstance));

myMixTreeLayout.current.setLevelColors(['#7e22ce30', '#2564eb3a', '#71c9053d', '#ea5a0c34']);
await myMixTreeLayout.current.loadData(myTreeJsonData);
myMixTreeLayout.current.applyAllGroupLayout();
myMixTreeLayout.current.connectRootToChildrenTreeRoot();

Level-Based Card Components

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        switch (node.data?.level) {
            case 'bu-leader': return <BULeaderCard node={node} />;
            case 'director': return <DirectorCard node={node} />;
            case 'leader': return <LeaderCard node={node} />;
            case 'manager': return <ManagerCard node={node} />;
            default: return <div>{node.text}</div>;
        }
    }}
</RGSlotOnNode>

Orthogonal Line Style

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultLineWidth: 3,
    defaultLineColor: '#666666',
    defaultNodeColor: 'transparent'
};

Creative Use Cases

Corporate Org Charts: Executive, director, manager, and individual contributor levels with distinct styling. Clear visual hierarchy.

Military Organization: Command hierarchy with rank-based styling. Chain of command visualization.

University Structure: Administration, deans, department heads, and faculty levels. Academic hierarchy display.

Government Organization: Agency, bureau, division, and branch levels. Government structure visualization.

Healthcare Organization: Executives, directors, managers, and staff levels. Hospital or healthcare system organization.

Project Organization: Project sponsors, project managers, team leads, and team members. Project team structure.

School System: Superintendent, principals, department heads, and teachers. Educational institution hierarchy.

Franchise Organization: Franchise owner, regional managers, store managers, and staff. Multi-level business structure.