OrgChartJS Docs

React

This document shows you haw you can create an OrgChart JS React project.

1. Create a new project:

               npx create-react-app orgchart
           

2. Go to the project root folder:

               cd orgchart
           

3. Install the OrgChart JS NPM package:

               npm i @balkangraph/orgchart.js
           

4. Create file mychart.js in the src folder with the following content:

                import React, { Component } from 'react';
                import OrgChart from '@balkangraph/orgchart.js';
   
                export default class 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",
                               field_1: "title"
                           }
                       });
           
                   }
   
                   render() {
                       return (
                            <div id="tree" ref={this.divRef}></div>
                       );
                   }
               }
           

5. 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>
                   );
                 }
               }
           

6. Start the project:

               npm start