Getting Started

There are two types of licenses: Community and Commercial.

If you plan to use a Commercial license, download the FREE Trial edition. If you want to use the product for free with limited functionality, start with the Community Edition.

Installation

Trial

npm install balkan-orgchart-react

Community

npm install balkan-orgchart-react-community

or with yarn:

Trial

yarn add balkan-orgchart-react

Community

yarn add balkan-orgchart-react-community

Simple Usage

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

export const ChartExample = () => {
  return  <OrgChartReact 
            data={[
              { id: 1, name: "Amber McKenzie" },
              { id: 2, pid: 1, name: "Ava Field" },
              { id: 3, pid: 1, name: "Peter Stevens" }
            ]}  
            nodeBinding={{ field_0: 'name', field_1: 'title' }}>
          </OrgChartReact>
}

Getting Started Example

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>
}

Load from JSON Example