How to create an OrgChart React programmatically

There are a number of ways to create an Orgchart programmatically.

Using add function

Here is an example:

chartRef.current?.add({ id: 1, name: "Denny Curtis", title: "CEO" });
chartRef.current?.add({ id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager" });
chartRef.current?.draw();

add

If you call draw function with OrgChartJS.action.init it will draw the chart based on scaleInitial and will center the graph.

Using addNode function

If you add a node using addNode you will not need to call draw function:

chartRef.current?.addNode({ id: 1, name: "Denny Curtis", title: "CEO" });

addNode

Using update function

chartRef.current?.update({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });
chartRef.current?.update({ id: 1, name: "Updated Name", title: "Updated Title" });
chartRef.current?.draw();

update

Using updateNode function

chartRef.current?.updateNode({ id: 4, pid: 2, name: "Updated Name", title: "Updated Title" });

updateNode

Using remove function

chartRef.current?.remove(2);
chartRef.current?.draw();

remove

Using removeNode function

chartRef.current?.removeNode(2);

removeNode