yFiles React Organization Chart Component

Welcome to the yFiles React Organization Chart component, a powerful and versatile React component based on the yFiles library. This component enables seamless integration for displaying organization charts in your React applications.

Getting Started

1. Installation: Install the component via npm by running the following command in your project directory:

   npm install @yworks/react-yfiles-orgchart

   The organization chart module has certain peer dependencies that must be installed within your project. Since it is a React module, react and react-dom dependencies are needed.

   Additionally, the component relies on the yFiles library which is not available on the public npm registry. Instructions on how to work with the yFiles npm module in our Developer's Guide.

   Ensure that the dependencies in the package.json file resemble the following:

   {
     ...
     "dependencies": {
       "@yworks/react-yfiles-orgchart": "^1.0.0",
       "react": "^18.2.0",
       "react-dom": "^18.2.0",
       "yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
       ...
     }
   }

2. License: Before using the component, a valid yFiles for HTML version is required. You can evaluate yFiles for 60 days free of charge on my.yworks.com. Be sure to invoke the registerLicense function to furnish the license file before utilizing the organization chart component.

3. Usage: Utilize the component in your application. Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality.

   import { CustomOrgChartData, OrgChart, registerLicense } from '@yworks/react-yfiles-orgchart'
   import '@yworks/react-yfiles-orgchart/dist/index.css' 
   import yFilesLicense from './license.json'
   
   function App() {
     registerLicense(yFilesLicense)
     
     const data = [
       { id: 0, name: 'Eric Joplin', subordinates: [1, 2] },
       { id: 1, name: 'Amy Kain' },
       { id: 2, name: 'David Kerry' }
     ] satisfies CustomOrgChartData<{name: string}>
    
     return <OrgChart data={data}></OrgChart>
   }
   
   export default App

   Note: By default, the OrgChart component adjusts its size to match the size of its parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to the OrgChart component. This can be achieved by defining a CSS class or applying inline styles.

Documentation

Find the full documentation, API and many code examples in our documentation.

Live Playground

Try the yFiles React Organization Chart component directly in your browser with our playground

Features

The component provides versatile features out of the box that can be further tailored to specific use cases.

Level of detail visualization	Custom visualization
Interactive Collapse / Expand	Search

Find all features in the documentation and try them directly in the browser with our integrated code playground.

Learn More

Explore the possibilities of visualizing organizational structures with the yFiles Organization Chart Component. For further information about yFiles for HTML and our company, please visit yWorks.com.

For support or feedback, please reach out to our support team or open an issue on GitHub. Happy diagramming!