org-chart | Hierarchical Organizational Chart for Angular | Chart library

I am using p-organizationChart to display hierarchy. I am adding child dynamically. After adding child, it's not displaying expand arrow, but when I select any Node then it reflects.

So, I would like to refresh this org-chart programmatically.

Any suggestions?

I'm working on an org chart and looking to incorporate this library https://github.com/unicef/react-org-chart

It works on their demo but when i try to incorporate into my own app, i'll get the following error

Error: index.js:156 Uncaught TypeError: Cannot read property 'tree' of undefined

I tried to console log the property tree and tree is already defined as shown below.

Would anyone know if it's a library issue or i'm not incorporating it correctly?

I am implementing a flask application on which I want cytoscape graphs on it. I also want to dynamically update the data by sending a rest API call on the flask application and based on the data the cytoscape graph updates the graphs.

This is the code I have written to do so, but the update process is slow i.e. it receives the data but that data isn't updated on the dash code.

I need to be able to render any organization hierarchy tree onto a web page of any given dimension and then, using a headless browser, convert the page to a PDF, while keeping the text legible so that large companies can print it on large print outs or zoom in to see it.

End goal:

• Company can create a hierarchy of their organization through an app
• Visually preview it through the web interface
• Save to a PDF (and optionally print a physical copy)

This allows them to have a single source of truth and to visually represent their organization's tree. Some organizations would like to define a large pdf size (eg, 24" x 36") and be able to take their PDF on a flash drive to Kinkos and print it and display it in their office.

Note: There is no upper limit on the depth or width of an organization. Currently have companies that are 300+ across and 5 levels deep. So that is why I need an approach that will scale.

Currently, I'm taking a brute force approach by scaling the font-size of the parent container.

• Set font-size on chart element to 0
• Create a while loop and increment the font-size by some increment (ex. 0.1px)
• Let the browser redraw the chart
• Check if it's overflowing
• if not overflowing, increment & repeat, else, decrement by increment amount and exit loop

Large charts need finer increments, otherwise they don't render at all.

Example, say the font-size increment is 0.5. If a chart is so large 0.5px is overflowing, the current script will increment - see it's overflowing - then revert to 0, meaning it's not displayed.

If I lower the increment, then most smaller charts render time will increase drastically.