Welcome to the yFiles React Organization Chart Component

Organization charts serve as invaluable tools for illustrating hierarchical structures within a company or any other entity. They offer a visual representation of relationships and reporting structures, making it easier to understand roles, responsibilities, and the overall organization’s hierarchy. The yFiles library is ideally suited for visualizing and exploring such hierarchies.

The yFiles React Organization Chart Component uses the yFiles library in order to seamlessly incorporate dynamic and interactive organization charts into your React applications. This enhances the user experience and facilitates an intuitive exploration of complex organizational setups.

Refer to the Getting Started section to learn how to effortlessly integrate an organization chart with our data into your React application.

/* Explore the OrgChart React component in this interactive playground. You can adjust the data in the 'data.json' tab or add functionality using the props of the <OrgChart> component. */ function App() { return <OrgChart data={data}></OrgChart> } [ { "id": 1, "position": "Chief Executive Officer", "name": "Eric Joplin", "email": "ejoplin@yoyodyne.com", "status": "present", "icon": "../assets/usericon_male1.svg", "subordinates": [2, 3, 15] }, { "id": 2, "position": "Senior Executive Assistant", "name": "Alexander Burns", "email": "aburns@yoyodyne.com", "status": "busy", "icon": "../assets/usericon_male3.svg", }, { "id": 3, "position": "Junior Executive Assistant", "name": "Linda Newland", "email": "lnewland@yoyodyne.com", "status": "travel", "icon": "../assets/usericon_female1.svg", } ]