OrgChart JS Documentation

React

This document shows you haw you can add OrgChart JS to your React project.

  1. Install the OrgChart JS NPM package, starting this command in your project root folder:
                npm i @balkangraph/orgchart.js
            
  2. Create file mychart.js with the following content:
                 import React, { Component } from 'react';
                 import OrgChart from '@balkangraph/orgchart.js/orgchart';
    
                export default class extends Component {
    
                    shouldComponentUpdate() {
                        return false;
                    }
    
                    componentDidMount() {
                        this.chart = new OrgChart(this.refs.tree , {
                            nodes: this.props.nodes,
    
                            nodeBinding: {
                                field_0: "name",
                                field_1: "title"
                            }
                        });
            
                    }
    
                    render() {
                        return (
                             <div id="tree" ref="tree"></div>
                        );
                    }
                }
            
  3. Change app.js as follows:
                import React, { Component } from 'react';
                import OrgChart from './mychart';
    
                export default class App extends Component {
                  constructor(props) {
                    super(props);
                  }
    
                  render() {
                    return (
                               <div style={{height: '100%'}}>
    
                               <OrgChart nodes={
                                         [{id: 1, name: "Name1" , title: "Tytle1" },
                                         {id: 2, pid: 1, name: "Name2" , title: "Tytle2" },
                                         {id: 3, pid: 1, name: "Name3" , title: "Tytle3" }]} />
    
                      </div>
                    );
                  }
                }
            

Now you can start your project and see the OrgChart.