Getting Started

Prerequisites

For using the component, yFiles for HTML is required. You can evaluate yFiles for 60 days free of charge on my.yworks.com. See Licensing for more information on this topic.

Project setup

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 some peer dependencies that must be installed somewhere in 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 published to the public npm registry. You can learn 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": "^0.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz",
    ...
  }
}
```
License: Be sure to invoke the registerLicense function to activate the license for the application before using the company-ownership component.

Usage: Utilize the component in your application. Make sure to import the CSS stylesheet.

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.

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!