How to Run a React Org Chart with OrgChartJS

Want to create an interactive org chart in React? Using OrgChartJS, you can get up and running in just a few steps. Let’s build a simple org chart app from scratch.

🛠️ Step 1: Create Your React App

First, generate a new React project:

npx create-react-app orgchart
cd orgchart

📦 Step 2: Download OrgChartJS

Download the OrgChartJS library from here and copy orgchart.js into your project directory (e.g., in src/).

🧩 Step 3: Create the Org Chart Component

Create a new file mytree.js inside the src/ folder:

import React, { Component } from 'react';
import OrgChart from "./orgchart.js";

export default class Tree extends Component {
    constructor(props) {
        super(props);
        this.divRef = React.createRef();
    }

    shouldComponentUpdate() {
        return false;
    }

    componentDidMount() {
        this.chart = new OrgChart(this.divRef.current, {
            nodes: this.props.nodes,
            nodeBinding: {
                field_0: 'name',
                img_0: 'img'
            }
        });
    }

    render() {
        return (
            <div id="tree" ref={this.divRef}></div>
        );
    }
}

✏️ Step 4: Modify App.js

Replace the contents of App.js with the following:

import React, { Component } from 'react';
import OrgChart from './mytree';

export default class App extends Component {
    render() {
        return (
            <div style={{ height: '100%' }}>
                <OrgChart nodes={[
                    { id: 1, name: 'Denny Curtis', title: 'CEO', img: 'https://cdn.balkan.app/shared/2.jpg' },
                    { id: 2, pid: 1, name: 'Ashley Barnett', title: 'Sales Manager', img: 'https://cdn.balkan.app/shared/3.jpg' },
                    { id: 3, pid: 1, name: 'Caden Ellison', title: 'Dev Manager', img: 'https://cdn.balkan.app/shared/4.jpg' },
                    { id: 4, pid: 2, name: 'Elliot Patel', title: 'Sales', img: 'https://cdn.balkan.app/shared/5.jpg' },
                    { id: 5, pid: 2, name: 'Lynn Hussain', title: 'Sales', img: 'https://cdn.balkan.app/shared/6.jpg' },
                    { id: 6, pid: 3, name: 'Tanner May', title: 'Developer', img: 'https://cdn.balkan.app/shared/7.jpg' },
                    { id: 7, pid: 3, name: 'Fran Parsons', title: 'Developer', img: 'https://cdn.balkan.app/shared/8.jpg' }
                ]} />
            </div>
        );
    }
}

▶️ Step 5: Run the App

Now you’re ready to launch your org chart!

npm start

Open http://localhost:3000 in your browser, and you should see your org chart in action 🎉