OrgChart React

BALKAN OrgChart React is a powerful JavaScript library for building interactive organizational charts and hierarchy diagrams. Create responsive org charts for company structures, HR systems, dashboards, and internal tools with minimal code and full customization.

Docs      Support

Overview

OrgChart React is FREE Trial, available under EULA.

Installation

npm install balkan-orgchart-react

or with yarn:

yarn add balkan-orgchart-react

Usage

import {OrgChartReact} from "balkan-orgchart-react";

export const ChartExample = () => {
  return  <OrgChartReact  nodeBinding={{ field_0: 'name'}} data={[
                { id: 1, name: "Denny Curtis" },
                { id: 2, pid: 1, name: "Ashley Barnett" },
                { id: 3, pid: 1, name: "Caden Ellison" }
            ]} >
          </OrgChartReact>
}

Load form JSON

import {OrgChartReact} from "balkan-orgchart-react";

export const ChartExample = () => {
  const [jsonData, setJsonData] = useState([]);

  useEffect(() => {
    fetch('/data.json')
      .then((response) => response.json())
      .then((data) => {
        setJsonData(data)
      })
      .catch((error) => {
        console.error('Error loading data:', error)
      })
  }, []);

  return  <OrgChartReact data={jsonData}  nodeBinding={{ field_0: 'name', field_1: 'title' }}></OrgChartReact>
}

Custom Template

import {OrgChartReact, Employee, Template} from "balkan-orgchart-react";

export const ChartExample = () => {
  return  <OrgChartReact template='myTemplate1'>      
        
      <Template name='myTemplate1' nodeWidth={200} nodeHeight={100} baseTemplateName='ana' renderNode={(node, data) => {
          return <>
            <rect x="0" y="0" height={node.h} width={node.w} fill="#fff" stroke="#aeaeae" strokeWidth={1}  rx={10} ry={10}> </rect>

            <text x={node.w ? node.w  / 2 : 0} y={node.h ? node.h  / 2 + 10: 0}  fill="#aeaeae" fontSize="20" textAnchor="middle">
                {data.employeeName}
            </text>                        
          </>
        }}>
      </Template>
      
      <Template name='myTemplate2' nodeWidth={500} nodeHeight={500}  baseTemplateName='myTemplate1'></Template>

      <Employee employeeName='Denny Curtis' >
        <Employee  employeeName='Lexie Cole'></Employee>
        <Employee  employeeName='Janae Barrett'  template='myTemplate2'></Employee>
        <Employee employeeName='Aaliyah Webb'></Employee>
      </Employee>
     </OrgChartReact>
}

API Call

import { OrgChartReact, Employee, OrgChartJS } from "balkan-orgchart-react";

export const ChartExample = () => {
  const chartRef = useRef<OrgChartJS>(null);

  const handleExport = () => {    
    if (chartRef.current) {
      chartRef.current.exportToPDF(); 
    }
  };

  return (
    <>      
      <button onClick={handleExport} style={{ fontSize: "24px"}}>Export PDF</button>

      <OrgChartReact  ref={chartRef} nodeBinding={{ field_0: "name", field_1: "title", img_0: "photo" }} >
        <Employee name="Denny Curtis" title="CEO" photo="https://cdn.balkan.app/shared/a/6.jpg">
          <Employee name="Lexie Cole" title="QA Lead" />
          <Employee name="Janae Barrett" title="Technical Director" />
          <Employee name="Aaliyah Webb" title="Assistant" />
        </Employee>
      </OrgChartReact>
    </>
  );
};

You can call any API method from here

Other Framework-Specific OrgChart JS Libraries

• Community
  • balkan-orgchart-js-community
  • balkan-orgchart-react-community
  • balkan-orgchart-vue-community
  • balkan-orgchart-angular-community
• Commercial - FREE Trial License
  • balkan-orgchart-js
  • balkan-orgchart-react
  • balkan-orgchart-vue
  • balkan-orgchart-angular

Docs      Support